Vue路由vue-router

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/10/03/7527273.html
-Advertisement-
Play Games

[1]概述 [2]使用 [3]路由模式 [4]重定向和別名 [5]根路徑 [6]嵌套路由 [7]命名路由 [8]命名視圖 [9]動態路由 [10]查詢字元串 [11]滾動行為 [12]過渡動效 [13]路由元數據 [14]編程式導航 [15]導航鉤子 [16]懶載入 ...


前面的話

　　在Web開發中，路由是指根據URL分配到對應的處理程式。對於大多數單頁面應用，都推薦使用官方支持的vue-router。Vue-router通過管理URL，實現URL和組件的對應，以及通過URL進行組件之間的切換。本文將詳細介紹Vue路由vue-router

 

安裝

　　在使用vue-router之前，首先需要安裝該插件

npm install vue-router

　　如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

　　如果使用全局的 script 標簽，則無須如此

 

使用

　　用Vue.js + vue-router創建單頁應用非常簡單。使用Vue.js ，已經可以通過組合組件來組成應用程式，把vue-router添加進來，需要做的是，將組件(components)映射到路由(routes)，然後告訴 vue-router 在哪裡渲染它們

　　下麵是一個實例

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 組件來導航，通過傳入 `to` 屬性指定鏈接，<router-link> 預設會被渲染成一個 `<a>` 標簽 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口，路由匹配到的組件將渲染在這裡 -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義（路由）組件，可以從其他文件 import 進來
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定義路由
// 每個路由應該映射一個組件。 其中"component" 可以是通過 Vue.extend() 創建的組件構造器，或者，只是一個組件配置對象。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 創建 router 實例，然後傳 `routes` 配置，當然還可以傳別的配置參數
const router = new VueRouter({
  routes // （縮寫）相當於 routes: routes
})

// 4. 創建和掛載根實例。
// 通過 router 配置參數註入路由，從而讓整個應用都有路由功能
const app = new Vue({
　　el:'#app',
　　router
})</script>

 

路由模式

　　vue-router 預設 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，於是當 URL 改變時，頁面不會重新載入

http://localhost:8080/#/Hello

　　如果不想要很醜的 hash，可以用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

　　當使用 history 模式時，URL 就像正常的 url

http://localhost:8080/Hello

　　不過這種模式需要後臺配置支持。如果後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404

【伺服器配置】

　　如果要使用history模式，則需要進行伺服器配置

　　所以，要在服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是app 依賴的頁面

　　下麵是一些配置的例子

apache

　　以wamp為例，需要對httpd.conf配置文件進行修改

　　首先，去掉rewrite_module前面的#號註釋

LoadModule rewrite_module modules/mod_rewrite.so

　　然後，將文檔所有的AllowOverride設置為all

AllowOverride all

　　最後，需要保存一個.htaccess文件放置在根路徑下麵，文件內容如下

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
  try_files $uri $uri/ /index.html;
}

【註意事項】

　　這麼做以後，伺服器就不再返回404錯誤頁面，因為對於所有路徑都會返回 index.html 文件。為了避免這種情況，應該在Vue應用裡面覆蓋所有的路由情況，然後再給出一個404頁面

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

　　或者，如果是用 Node.js 作後臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 fallback

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const NotFound = {template:'<div>not found</div>'}

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', component: NotFound},
]

 

 

重定向和別名

【重定向】

　　重定向通過 routes 配置來完成，下麵例子是從 /a 重定向到 /b

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

　　重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

　　甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目標路由 作為參數
      // return 重定向的 字元串路徑/路徑對象
      return '/home'
    }}
  ]
})

　　對於不識別的URL地址來說，常常使用重定向功能，將頁面定向到首頁顯示

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
  { path: '*', redirect: "/foo"},
]

【別名】

　　重定向是指，當用戶訪問 /a時，URL 將會被替換成 /b，然後匹配路由為 /b，那麼別名是什麼呢？/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像用戶訪問 /a 一樣

　　上面對應的路由配置為

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

　　『別名』的功能可以自由地將 UI 結構映射到任意的 URL，而不是受限於配置的嵌套路由結構

 　　處理首頁訪問時，常常將index設置為別名，比如將'/home'的別名設置為'/index'。但是，要註意的是，<router-link to="/home">的樣式在URL為/index時並不會顯示。因為，router-link只識別出了home，而無法識別index

 

根路徑

　　設置根路徑，需要將path設置為'/'

  <p>
    <router-link to="/">index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

　　但是，由於預設使用的是全包含匹配，即'/foo'、'/bar'也可以匹配到'/'，如果需要精確匹配，僅僅匹配'/'，則需要在router-link中設置exact屬性

  <p>
    <router-link to="/" exact>index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>

const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

 

嵌套路由

　　實際生活中的應用界面，通常由多層嵌套的組件組合而成。同樣地，URL中各段動態路徑也按某種結構對應嵌套的各層組件

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

　　藉助 vue-router，使用嵌套路由配置，就可以很簡單地表達這種關係

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>
const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link to="/foo/foo1">to Foo1</router-link>
      <router-link to="/foo/foo2">to Foo2</router-link>
      <router-link to="/foo/foo3">to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }
const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'foo1',component:Foo1},
    {path:'foo2',component:Foo2},
    {path:'foo3',component:Foo3},
  ]},
  { path: '/bar', component: Bar },
]

　　要特別註意的是，router的構造配置中，children屬性里的path屬性只設置為當前路徑，因為其會依據層級關係；而在router-link的to屬性則需要設置為完全路徑

　　如果要設置預設子路由，即點擊foo時，自動觸發foo1，則需要進行如下修改。將router配置對象中children屬性的path屬性設置為''，並將對應的router-link的to屬性設置為'/foo'

const Foo = { template: `
  <div>
    <p>
      <router-link to="/foo" exact>to Foo1</router-link>
      <router-link to="/foo/foo2">to Foo2</router-link>
      <router-link to="/foo/foo3">to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const routes = [
  { path: '/', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'',component:Foo1},
    {path:'foo2',component:Foo2},
    {path:'foo3',component:Foo3},
  ]},
  { path: '/bar', component: Bar },
]

　　結果如下所示

 

命名路由

　　有時，通過一個名稱來標識一個路由顯得更方便，特別是在鏈接一個路由，或者是執行一些跳轉時。可以在創建Router實例時，在routes配置中給某個路由設置名稱

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

　　要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

　　這跟代碼調用 router.push() 是一回事

router.push({ name: 'user', params: { userId: 123 }})

　　這兩種方式都會把路由導航到 /user/123 路徑

　　命名路由的常見用途是替換router-link中的to屬性，如果不使用命名路由，由router-link中的to屬性需要設置全路徑，不夠靈活，且修改時較麻煩。使用命名路由，只需要使用包含name屬性的對象即可

　　[註意]如果設置了預設子路由，則不要在父級路由上設置name屬性

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{ name: 'foo1' }">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>
const Home = { template: '<div>home</div>' }
const Foo = { template: `
  <div>
    <p>
      <router-link :to="{ name: 'foo1' }" exact>to Foo1</router-link>
      <router-link :to="{ name: 'foo2' }" >to Foo2</router-link>
      <router-link :to="{ name: 'foo3' }" >to Foo3</router-link>  
    </p>
    <router-view></router-view>
  </div>
  ` }
const Bar = { template: '<div>bar</div>' }
const Foo1 = { template: '<div>Foo1</div>' }
const Foo2 = { template: '<div>Foo2</div>' }
const Foo3 = { template: '<div>Foo3</div>' }
const routes = [
  { path: '/', name:'home', component: Home },
  { path: '/foo', component: Foo ,children:[
    {path:'',name:'foo1', component:Foo1},
    {path:'foo2',name:'foo2', component:Foo2},
    {path:'foo3',name:'foo3', component:Foo3},
  ]},
  { path: '/bar', name:'bar', component: Bar },
]

　　結果如下所示

 

命名視圖

　　有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創建一個佈局，有 sidebar（側導航） 和 main（主內容） 兩個視圖，這個時候命名視圖就派上用場了。可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設置名字，那麼預設為 default

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

　　一個視圖使用一個組件渲染，因此對於同個路由，多個視圖就需要多個組件。確保正確使用components配置

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

　　下麵是一個實例

<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{ name: 'foo' }">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
  <router-view></router-view>
  <router-view name="side"></router-view>
</div>
const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>Foo</div>'}
const MainBar = { template: '<div>mainBar</div>' }
const SideBar = { template: '<div>sideBar</div>' }

const routes = [
  { path: '/', name:'home', component: Home },
  { path: '/foo', name:'foo', component: Foo},
  { path: '/bar', name:'bar', components: {
    default: MainBar,
    side:SideBar
   } },
]

　　結果如下所示

 

動態路徑

　　經常需要把某種模式匹配到的所有路由，全都映射到同個組件。例如，有一個 User 組件，對於所有 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，可以在 vue-router 的路由路徑中使用動態路徑參數（dynamic segment）來達到這個效果

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 動態路徑參數以冒號開頭
    { path: '/user/:id', component: User }
  ]
})

　　現在，像 /user/foo 和 /user/bar 都將映射到相同的路由

　　下麵是一個比較完整的實例，path:'/user/:id?'表示有沒有子路徑都可以匹配

<div id="app">
    <router-view></router-view>
    <br>
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'user'}">User</router-link>
    <router-link :to="{name:'bar'}">Go to Bar</router-link>
  </p>
</div>

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = {template: `<div>
                          <p>user</p>
                          <router-link style="margin: 0 10px" :to="'/user/' + item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
                      </div>`,
  data(){
    return{userList:[{id:1,userName:'u1'},{id:2,userName:'u2'},{id:3,userName:'u3'}]}
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

　　一個路徑參數使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。於是，可以更新 User 的模板，輸出當前用戶的 ID：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

　　下麵是一個實例

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/bar">/user/bar</router-link>
  </p>
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})
const app = new Vue({ router }).$mount('#app')
</script>

　　可以在一個路由中設置多段『路徑參數』，對應的值都會設置到 $route.params 中。例如：

模式     　　　　　　　　　　　　　　匹配路徑     　　　　　　$route.params
/user/:username     　　　　　　　/user/evan     　　　　{ username: 'evan' }
/user/:username/post/:post_id   /user/evan/post/123   { username: 'evan', post_id: 123 }

　　除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query（如果 URL 中有查詢參數）、$route.hash 等等

【響應路由參數的變化】

　　使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被覆用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用

　　復用組件時，想對路由參數的變化作出響應的話，可以簡單地 watch（監測變化） $route 對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化作出響應...
    }
  }
}

　　[註意]有時同一個路徑可以匹配多個路由，此時，匹配的優先順序就按照路由的定義順序：誰先定義的，誰的優先順序就最高

　　下麵是一個實例

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="'/user/' +item.type + '/'+ item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:type?/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

 

查詢字元串

　　實現子路由，除了使用動態參數，也可以使用查詢字元串

const home = { template: '<div>home</div>'};
const bar = { template: '<div>bar</div>'};
const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="'/user/' +item.type + '/'+ item.id" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
      <router-link to="?info=follow" exact>關註</router-link>
      <router-link to="?info=share" exact>分享</router-link>
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};
const app = new Vue({
  el:'#app',
  router:new VueRouter({
    routes: [
      { path: '/', name:'home', component:home },
      { path: '/user/:type?/:id?', name:'user', component:user},
      { path: '/bar', name:'bar', component:bar},
    ],
  }), 
})

　　當需要設置預設查詢字元串時，進行如下設置

const user = 
  {template: `<div>
    <p>user</p>
    <router-link style="margin: 0 10px" :to="{path:'/user/' +item.type + '/'+ item.id,query:{info:'follow'}}" v-for="item in userList" key="item.id">{{item.userName}}</router-link>  
    <div v-if="$route.params.id">
      <div>id:{{userInfo.id}};userName:{{userInfo.userName}} ;type:{{userInfo.type}};</div>
      <router-link to="?info=follow" exact>關註</router-link>
      <router-link to="?info=share" exact>分享</router-link>
      {{$route.query}}
    </div>
</div>`,
  data(){
    return{
      userList:[{id:1,type:'vip',userName:'u1'},{id:2,type:'common',userName:'u2'},{id:3,type:'vip',userName:'u3'}],
      userInfo:null,
    }
  },
  methods:{
    getData(){
      let id = this.$route.params.id;
      if(id){
        this.userInfo = this.userList.filter((item)=>{
          return item.id == id;
        })[0]
      }else{
        this.userInfo = {};
      }   
    }
  },
  created(){
    this.getData();
  },
  watch:{
    $route(){
      this.getData();
    },
  }
};

 

滾動行為

　　使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新載入頁面那樣。 vue-router 能做到，而且更好，它可以自定義路由切換時頁面如何滾動

　　[註意]這個功能只在 HTML5 history 模式下可用

　　當創建一個 Router 實例，可以提供一個 scrollBehavior 方法。該方法在前進、後退或切換導航時觸發

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滾動到哪個的位置
  }
})

　　scrollBehavior 方法返回 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用，返回滾動條的坐標{x:number,y:number}

　　如果返回一個布爾假的值，或者是一個空對象，那麼不會發生滾動

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

　　對於所有路由導航，簡單地讓頁面滾動到頂部。返回 savedPosition，在按下 後退/前進 按鈕時，就會像瀏覽器的原生表現那樣：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

　　下麵是一個實例，點擊導航進行切換時，滾動到頁面頂部；通過前進、後退按鈕進行切換時，保持坐標位置

const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})

　　還可以模擬『滾動到錨點』的行為：

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

　　下麵是一個實例

<div id="app">
    <router-view></router-view>
    <br>
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo' ,hash:'#abc'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
  </p>
</div>
const router = new VueRouter({
  mode:'history',
  routes ,
  scrollBehavior (to, from, savedPosition){
    if(to.hash){
      return {
        selector: to.hash
      }
    }
    if(savedPosition){
      return savedPosition;
    }else{
      return {x:0,y:0}
    }
  }
})

 

過渡動效

　　<router-view> 是基本的動態組件，所以可以用 <transition> 組件給它添加一些過渡效果：

<transition>
  <router-view></router-view>
</transition>

　　下麵是一個實例

  .router-link-active{background:pink;}
  .v-enter,.v-leave-to{
    opacity:0;
  }
  .v-enter-active,.v-leave-active{
    transition:opacity .5s;
  }
<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
    <transition>
        <router-view></router-view>
    </transition>
  </p>
</div>

【單個路由過渡】

　　上面的用法會給所有路由設置一樣的過渡效果，如果想讓每個路由組件有各自的過渡效果，可以在各路由組件內使用 <transition> 並設置不同的 name

const Foo = {
  template: `
    <transition name="slide">
      <div class="foo">...</div>
    </transition>
  `
}
const Bar = {
  template: `
    <transition name="fade">
      <div class="bar">...</div>
    </transition>
  `
}

 

路由元信息

　　定義路由的時候可以配置 meta 欄位：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

　　routes配置中的每個路由對象被稱為路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功後，它可能匹配多個路由記錄。例如，根據上面的路由配置，/foo/bar 這個URL將會匹配父路由記錄以及子路由記錄

　　一個路由匹配到的所有路由記錄會暴露為 $route 對象（還有在導航鉤子中的 route 對象）的 $route.matched 數組。因此，需要遍歷 $route.matched 來檢查路由記錄中的 meta 欄位

　　下麵例子展示在全局導航鉤子中檢查 meta 欄位：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() 
  }
})

【基於路由的動態過渡】

　　可以基於當前路由與目標路由的變化關係，動態設置過渡效果。通過使用路由元信息，在每個路由對象上設置一個index屬性保存其索引值

  <style>
  .router-link-active{background:pink;}
  .left-enter{
    transform:translateX(100%);
  }
  .left-leave-to{
    transform:translateX(-100%);
  }
  .left-enter-active,.left-leave-active{
    transition:transform .5s;
  }
  .right-enter{
    transform:translateX(-100%);
  }
  .right-leave-to{
    transform:translateX(100%);
  }
  .right-enter-active,.right-leave-active{
    transition:transform .5s;
  }  
  </style>
<div id="app">
  <p>
    <router-link to="/" exact>index</router-link>
    <router-link :to="{name:'foo'}">Go to Foo</router-link>
    <router-link :to="{ name: 'bar' }">Go to Bar</router-link>
    <transition :name="transitionName">
        <router-view></router-view>
    </transition>
  </p>
</div>
const app = new Vue({
  el:'#app',
  router,
  data () {
    return {
      'transitionName': 'left'
    }
  },
  watch: {
    '$route' (to, from) {
      this['transitionName'] = to.meta.index > from.meta.index ? 'right' : 'left';

    }
  },  
})

 

編程式導航

　　除了使用<router-link>創建a標簽來定義導航鏈接，還可以藉助router的實例方法，通過編寫代碼來實現

【router.push(location)】

　　想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器後退按鈕時，則回到之前的 URL。

　　當點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <router-link :to="..."> 等同於調用 router.push(...)

聲明式     　　　　　　　　　　　　編程式
<router-link :to="...">     router.push(...)

　　該方法的參數可以是一個字元串路徑，或者一個描述地址的對象。例如：

// 字元串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢參數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

【router.replace(location)】

　　跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄

聲明式                 　　　　　　　　　　編程式
<router-link :to="..." replace>     router.replace(...)

【router.go(n)】

　　這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，類似 window.history.go(n)

// 在瀏覽器記錄中前進一步，等同於 history.forward()
router.go(1)
// 後退一步記錄，等同於 history.back()
router.go(-1)
// 前進 3 步記錄
router.go(3)
// 如果 history 記錄不夠用，就靜默失敗
router.go(-100)
router.go(100)

【操作history】

　　router.push、router.replace和router.go跟history.pushState、history.replaceState和history.go類似， 實際上它們確實是效仿window.historyAPI的。vue-router的導航方法(push、replace、go)在各類路由模式(history、 hash和abstract)下表現一致

 

導航鉤子

　　vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全局的、單個路由獨享的或者組件級的

【全局鉤子】

　　可以使用 router.beforeEach 註冊一個全局的 before 鉤子

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTTP庫Axios
    [1]概述 [2]使用 [3]API [4]實例方法 [5]響應結構 [6]配置預設值 [7]攔截器 [8]錯誤處理 [9]取消 ...
  • SpringMvc文件上傳和下載
    1、首先導入jar包: 2、然後,在applicatinContext.xml中添加上傳和下載的配置文件,如下: 3、好了,最基礎的配置就好了,接下來jsp頁面:upload.jsp 4、Controller中對應的java代碼: 這樣就可以把網頁上選擇的圖片上傳上去了. 下載成功了! 5、文件下載 ...
  • 用JQuery寫出登錄彈出框
    類似百度的登錄彈出框，可用jquery的fadeIn()，hide()，show()，slideDown()等動畫函數實現，一下為html5 代碼： 小結：為獲取文檔元素可以為該元素設置一個空類，由空類名稱獲取，如上面的獲取.close；在寫表單的時候可以 放在<ol>和<ul>中，方便對齊格式；在 ...
  • echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
    一：錯誤描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二：錯誤原因：echarts在用json數據請求時未調用 數據請求格式： 三：解決辦法： （1）將上述代碼放在一個函數中，然後在onload中調用這個函數 （ ...
  • 實戰系列之 Node.js 玩轉 Java
    這些年以來，Node.js的興起，JavaScript已經從當年的“世界最被誤解的語言”變成了“世界最流行的語言”。且其發展之勢，從語言本身的進化，庫和包的增長，工具支持的完善，star項目和領域解決方案的涌現，平臺、技術棧、應用領域的擴張等諸方面來看，都是前所未見的。隨著Node.js服務的普及， ...
  • Vue狀態管理vuex
    [1]引入 [2]概述 [3]開始 [4]state [5]getter [6]mutation [7]action [8]module [9]項目結構 [10]插件 [11]嚴格模式 [12]表單處理 [13]測試 [14]熱載入 ...
  • Vuex的API文檔
    前面的話 本文將詳細介紹Vuex的API文檔 概述 【構造器選項】 state Vuex store 實例的根 state 對象 mutations 在 store 上註冊 mutation，處理函數總是接受 state 作為第一個參數（如果定義在模塊中，則為模塊的局部狀態），payload 作為第 ...
  • Vue-router的API詳解
    [1]router-link [2]router-view [3]路由信息對象 [4]Router構造配置 [5]Router實例 [6]對組件註入 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類