一、vue-router

1.安裝
npm install vue-router -D
2.使用
vue-router 是一個插件，需要在 Vue 的全局引用中通過 Vue.use()將它引用到 Vue 實例當中。在我們的工程中。main.js是程序入口文件，所有的全局性配置都會放在這里面。
3.路由配置
頁面就是組件，那么一個路由定義就該與一個組件相對應。第一個頁面應該是“首頁”，也就是默認路由。
4.配置一個簡單的路由
準備兩個頁面，格式相同即可：

    <!--/Home.vue-->
    <template>
        <div>Home</div>
    </template>
    <style></style>
    <script>
        export default {}
    </script>

在 main.js 中

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

在 router.js 中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Explorer from '@/components/Explorer'
import Cart from '@/components/Cart'
import Me from '@/components/Me'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }, {
      path: '/explorer',
      name: 'explorer',
      component: Explorer
    }
  ]
})

以后凡是遇到配置文件，就可以單獨配置，在 main.js 中僅引用配置到全局變量。

二、路由的模式

1.URL

• history 地址模式：http://localhost/home
• 非 history 地址模式：http://localhost/#home
  2.三種模式詳解
• Hash：使用 URL hash 值來作為路由。支持所有瀏覽器，包括不支持 HTML5 History API 的瀏覽器。
• History：依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
• Abstract：支持所有 JavaScript 運行環境，如 Node.js 服務器端。如果發現沒有瀏覽器 API，路由會自動強制進入這個模式。
  模式配置方式：

export default new VueRouter({
    mode: 'history',
    routes: [
        {
          path: '/home',
          name: 'home',
          component: Home
        }, {
          path: '/explorer',
          name: 'explorer',
          component: Explorer
        }
      ]
    })

三、路由與導航

1.vue-router 提供的兩個指令標簽

• <router-view>——渲染路徑匹配到的視圖組件，它還可以內嵌自己的<router-view>，根據嵌套路徑渲染嵌套組件。
• <router-link>——支持用戶在具有路由功能的應用中（點擊）導航。

    <template>
      <div id="app">
        <div class="tabs">
          <ul>
            <li>
              <router-link :to="{ name : 'home' }">
                Home
              </router-link>
            </li>
            <li>
              <router-link :to="{ name : 'explorer' }">
                Explorer
              </router-link>
            </li>
          </ul>
        </div>
    
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </template>

使用<router-link :to="{ name : 'explorer' }">的形式而不用<router-link :to="/explorer">，給每一個路由取一個名字，避免更改路由時需要再改導航的路徑。
2.指定輸出元素
不指定輸出元素時，代碼最終的輸出結果會是：

<ul>
    <li>
       <a href="#>
          <div>Home</div>
       </a>
     </li>
      <li>...</li>
</ul>

其實我們并不需要<a>標簽，可以通過屬性指定我們可以直接輸出到<li>標簽上節省出更多的代碼。<router-link :to="{ name : 'home' }" tag="li">

3.動態路由

routes:[{
    name: 'BookDetails',
    path: '/book/:id',
    component: BookDetails
}]

在參數名之前加上“:”，然后將參數寫在路由的 path 內。
在<router-link>中我們可以加入一個 params 的屬性來指定具體的參數值：

<router-link :to="{name: 'BookDetials', params: { id : 1 }" >
</router-link>

參數值的讀取方式：

export default {
    created () {
        const bookID = this.$router.params.id
    }
}

使用路由參數時，例如從/books/1導航到/books/2，原來的組件實例會被復用，比起銷毀再創建復用則顯得更加高效，不過，這也意味著組件的生命周期鉤子不會被重復調用，也就是說created、mounted 等鉤子函數在頁面第二次加載時會失效。那么，當組件復用時，想對路由參數的變化做響應的話，就需要在 watch 對象唄添加$route 對象變化的跟蹤函數:

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

4.前套路由
在 route.js 的配置中，要顯示子視圖與子路由的對應。利用 children 數組屬性就可以定義子路由了。

routes:[{
    name: 'Main',
    path: '/',
    component: Main,
    children: [
        {name: 'Home', path: 'home', component: Home,}
    ]
}]

子路由中的路徑就不需要加上"/"了，生成時主路由的 path 會被自動添加到自路由前。另外，以"/"開頭會被當做根路徑，就不要加"/"了。

5.切頁動畫
Vue 提供了 transition 的封裝組件。
有4個（CSS）類名在 enter/leave 的過度中切換：

• CSS 類名-enter
• CSS 類名-enter-active
• CSS 類名-leave
• CSS 類名-leave-active

四、導航狀態樣式

當用戶點擊 Tabs 上的任意一個標簽組件時，組件應該進入一個“激活”狀態。在默認情況下<router-link>對應的路由匹配成功，就會自動設置 class 屬性值為.router-link-active，如果我們想設置“激活”狀態樣式類名為 active，可以通過 active-clas 屬性進行設置。

<router-link :to=" { name: 'Home' } "
                    active-class="active" >
</router-link>

但如果要在頁面上這樣顯示聲明，每一個都寫一個，這樣就不 DRY 了。所以，可以在 router.js 中配置一下語句：

const router = new VueRouter ({
    // ...省略
    linkActiveClass: "active"
})

樣式激活是依據對 URL 的全包含匹配，也就意味這"/"跳轉到別的路由依舊會保持“激活”狀態。在這種情況下就需要使用精確匹配模式，使用 exact 屬性。

<router-link :to=" { name: 'Home' } " exact>
</router-link>

五、History 的控制

當我們在使用 HTML5的 History 模式的時候，每次路由的改變都會被“推”（push）到導航歷史中保留，在某些情況下我們并不需要瀏覽器這樣做，而是希望他能將原有的記錄進行替換。
首先，需要了解<router-link> 用兩種屬性來調用 Vue 實例內$router 對象的三個方法：

設置 replace 就會調用 router.replace() 而不是 router.push()，于是導航后就不會留下 History 記錄。

<router-link :to=" { name: 'Home' } " replace>
</router-link>

設置 append 屬性后，則在當前（相對）路徑前添加基本路徑。例如，從 /a 導航到相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配置了，則為 /a/b。

六、關于 Fallback

當使用 History 模式的時候，點擊<router-link>會自動調到相應的路徑，但是在瀏覽器直接輸入" http://loacalhost/home"則會404，因為瀏覽器直接將這個地址發向服務器。
解決辦法是將所有發到服務器端的請求利用服務器端的 URLRewrite 模板重新轉發給/index.html。
常見：
Apache
在配置文件中加入 URLRewrite模塊配置
Nginx
將404頁面自動重定向到/index.html
Node.js(Express)
安裝 Fallback 插件
注意
一旦配置，服務器將不再返回404錯誤頁面，為避免這種情況，應該在 Vue 應用里覆蓋所有的路由情況，然后在給出一個404頁面。

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