前面的話

　　在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(...)

　　在@click中，用$router表示路由物件，在methods方法中，用this.$router表示路由物件

　　該方法的引數可以是一個字串路徑，或者一個描述地址的物件。例如：

// 字串
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) => {
  // ...
})

　　當一個導航觸發時，全域性的 before 鉤子按照建立順序呼叫。鉤子是非同步解析執行，此時導航在所有鉤子 resolve 完之前一直處於 等待中。

　　每個鉤子方法接收三個引數：

to: Route: 即將要進入的目標路由物件
from: Route: 當前導航正要離開的路由
next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。

　　下面是next()函式傳遞不同引數的情況

next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

　　[注意]確保要呼叫 next 方法，否則鉤子就不會被 resolved。

　　同樣可以註冊一個全域性的 after 鉤子，不過它不像 before 鉤子那樣，after 鉤子沒有 next 方法，不能改變導航：

router.afterEach(route => {
  // ...
})

　　下面是一個例項

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>Foo</div>'}
const Bar = { template: '<div>bar</div>' }
const Login = { template: '<div>請登入</div>' }
const routes = [
  { path: '/', name:'home', component: Home,meta:{index:0}},
  { path: '/foo', name:'foo', component:Foo,meta:{index:1,login:true}},
  { path: '/bar', name:'bar', component:Bar,meta:{index:2}},
  { path: '/login', name:'login', component:Login,},
]
const router = new VueRouter({
  routes ,
})
router.beforeEach((to, from, next) => {
  if(to.meta.login){
    next('/login');
  }
  next();
});
router.afterEach((to, from)=>{
  document.title = to.name;
})
const app = new Vue({
  el:'#app',
  router,
})

【單個路由獨享】

　　可以在路由配置上直接定義 beforeEnter 鉤子

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

　　這些鉤子與全域性 before 鉤子的方法引數是一樣的

【元件內鉤子】

　　可以在路由元件內直接定義以下路由導航鉤子

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave 

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫，不能獲取元件例項 `this`，因為當鉤子執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫。舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉時，由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫，可以訪問元件例項 `this`
  }
}

　　beforeRouteEnter鉤子不能訪問this，因為鉤子在導航確認前被呼叫，因此即將登場的新元件還沒被建立

　　不過，可以通過傳一個回撥給 next來訪問元件例項。在導航被確認的時候執行回撥，並且把元件例項作為回撥方法的引數

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問元件例項
  })
}

　　可以在 beforeRouteLeave 中直接訪問 this。這個 leave 鉤子通常用來禁止使用者在還未儲存修改前突然離開。可以通過 next(false) 來取消導航

資料獲取

　　有時候，進入某個路由後，需要從伺服器獲取資料。例如，在渲染使用者資訊時，需要從伺服器獲取使用者的資料。可以通過兩種方式來實現：

　　1、導航完成之後獲取：先完成導航，然後在接下來的元件生命週期鉤子中獲取資料。在資料獲取期間顯示『載入中』之類的指示

　　2、導航完成之前獲取：導航完成前，在路由的 enter 鉤子中獲取資料，在資料獲取成功後執行導航。

　　從技術角度講，兩種方式都不錯 —— 就看想要的使用者體驗是哪種

【導航完成後獲取】

　　當使用這種方式時，會馬上導航和渲染元件，然後在元件的 created 鉤子中獲取資料。有機會在資料獲取期間展示一個 loading 狀態，還可以在不同檢視間展示不同的 loading 狀態。

　　假設有一個 Post 元件，需要基於 $route.params.id 獲取文章資料：

 

<template>
  <div class="post">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

export default {
  data () {
    return {
      loading: false,
      post: null,
      error: null
    }
  },
  created () {
    // 元件建立完後獲取資料，
    // 此時 data 已經被 observed 了
    this.fetchData()
  },
  watch: {
    // 如果路由有變化，會再次執行該方法
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      // replace getPost with your data fetching util / API wrapper
      getPost(this.$route.params.id, (err, post) => {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

【導航完成前獲取資料】

　　通過這種方式，在導航轉入新的路由前獲取資料。可以在接下來的元件的 beforeRouteEnter 鉤子中獲取資料，當資料獲取成功後只調用 next 方法

export default {
  data () {
    return {
      post: null,
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getPost(to.params.id, (err, post) => {
      if (err) {
        // display some global error message
        next(false)
      } else {
        next(vm => {
          vm.post = post
        })
      }
    })
  },
  // 路由改變前，元件就已經渲染完了
  // 邏輯稍稍不同
  watch: {
    $route () {
      this.post = null
      getPost(this.$route.params.id, (err, post) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.post = post
        }
      })
    }
  }
}

　　在為後面的檢視獲取資料時，使用者會停留在當前的介面，因此建議在資料獲取期間，顯示一些進度條或者別的指示。如果資料獲取失敗，同樣有必要展示一些全域性的錯誤提醒

懶載入

　　當打包構建應用時，JS包會變得非常大，影響頁面載入。如果能把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問的時候才載入對應元件，這樣就更加高效了

　　結合 Vue 的 非同步元件 和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入。

　　首先，可以將非同步元件定義為返回一個 Promise 的工廠函式(該函式返回的Promise應該 resolve 元件本身)

const Foo = () => Promise.resolve({ /*  元件定義物件 */ })

　　在 webpack 2中，使用動態 import語法來定義程式碼分塊點(split point):

import('./Foo.vue') // returns a Promise

　　[注意]如果使用的是 babel，需要新增syntax-dynamic-import外掛，才能使 babel 可以正確地解析語法

　　結合這兩者，這就是如何定義一個能夠被 webpack自動程式碼分割的非同步元件

const Foo = () => import('./Foo.vue')

　　在路由配置中什麼都不需要改變，只需要像往常一樣使用 Foo:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

【把元件按組分塊】

　　有時候想把某個路由下的所有元件都打包在同個非同步塊(chunk)中。只需要使用 命名 chunk，一個特殊的註釋語法來提供chunk name(需要webpack > 2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

　　webpack 會將任何一個非同步模組與相同的塊名稱組合到相同的非同步塊中