路由是根據不同的url展示不同的內容，前端路由就是把這個工作由伺服器轉到前端來做。
Vue.js+Vue-router可以很簡單的實現單頁應用。

單頁應用

單頁應用（SPA）能夠更新檢視而不重新請求頁面。
vue-router實現單頁應用主要有Hash模式和History模式，通過mode引數決定使用哪一種。預設使用Hash。
1、Hash模式：
hash（#）是URL 的錨點，代表的是網頁中的一個位置，單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新載入網頁，也就是說 #是用來指導瀏覽器動作的，對伺服器端完全無用，HTTP請求中也不會不包括#；同時每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用”後退”按鈕，就可以回到上一個位置；

2、History模式：
HTML5 History API提供了一種功能，能讓開發人員在不重新整理整個頁面的情況下修改站點的URL，就是利用 history.pushState API 來完成 URL 跳轉而無須重新載入頁面；

安裝

npm install vue-router

引入

在src中的main.js裡引入:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)//安裝外掛

配置路由

在router.js中配置路由

import Home from '@/component/home'

let router=new VueRouter({
    routes:[
        {
            path:'/home',//就是router-link的to屬性的值
            component:Home
        }
    ]
})
 

把路由物件傳給Vue例項

在main.js中傳例項

new Vue({
    el: '#app',
    //讓vue知道我們的路由規則
    router: router, //可以簡寫router
})

在App.vue中定義router-link和router-view

router-link會預設被渲染成一個a標籤，支援使用者在具有路由功能的應用中點選導航。
（vue1.0中只能通過給a標籤設定v-bind的方式）

設定to的值為要連線的路由的路徑

<router-link :to="{path:'/home'}"></router-link>
 

router-view路由匹配的元件渲染在這裡

 <router-view></router-view>

動態路由

主要用於點選列表項顯示詳情頁的情景，頁面結構基本相同，通過特定編號區分。
在一個路由中設定多個引數
在路徑後面加上:id

path:'/home/:id'

通過params指定具體的引數

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

引數值的讀取

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

巢狀路由

利用children屬性可以定義一個路由的子路由
子路由的路徑不需要加/，會自動新增到路由的路徑之後

routes:[
    {
        path:'/home',//就是router-link的to屬性的值
        component:Home,
        children:[
            {name:content,path:'content',component:Content}
        ]
    }
]

其他

transition元件
vue2.0提供transition封裝元件，實現一些元件的過渡效果。

transition只能有一個屬性name，用於替換CSS類名中的v-
v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。
v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在transition/animation完成之後移除。
v-leave:定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。
v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在transition/animation完成之後移除。

也只能有一個子元素，並且該子元素需要有v-if或v-show來控制是否顯示。

<transition name="fade">
   <p v-if="show">hello</p>
</transition>

導航的狀態樣式
使用者點選任意一個標籤元件時，元件會處於啟用狀態。
預設的元件啟用狀態類名為router-link-active
可以通過active-class來設定啟用類名：

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

命名路由
有時通過name來標識一個路由可能會更方便

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

連結到一個命名路由

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

命名檢視
有時想要在同時或者同級展示多個路由，就可以用命名檢視，為介面建立多個檢視出口。

<router-view name="a"></router-view>
<router-view name="b"></router-view>

在routes中的component裡對映一下

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

重定向與別名
重定向就是將網路請求重新定向到另一個URL，用於網頁轉移到新地址等場景。
在routes中配置：

  routes:[
    {path:'/a',redirect:'/b'}
  ]

別名就是給一個網頁分配多個URL，無論訪問哪一個URL得到的都是相同的網頁。
和重定向不同在於，輸入/b，URL還是/b，但是網頁跳轉/a

  routes:[
    {path:'/a',alias:'/b'}
  ]