1.安裝

直接引入

<script src="vue.js"></script>
<script src="vue-router.js"></script>

npm下載

npm install vue-router

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

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

Vue.use(VueRouter)

2.使用

在router下的js檔案中

export default new Router({
routes: [
		path: '/',
		component: View
	]
})
 

餓了麼中路由例項

3.巢狀路由

實際生活中的應用介面，通常由多層巢狀的元件組合而成。巢狀路由即是在原路由中加一個children屬性，children可以是一個數組，存放這個父路由的所有子路由；也可以是一個路由檔案，檔案中存放的路由都該路由的子路由

上圖中HomePage為父路由元件，children中的路由為該路由的子路由，子路由中的元件會展示在父元件中（父元件中需要用<router-view></router-view>來渲染子路由中的元件）

使用<router-link></router-link>來切換路由

4.動態匹配路由

我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個 User 元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果：

{
		path:"/seller:id",//通過不同的id來使不同的商家都使用同一個元件，id可傳可不傳
		component: Seller,
}

5.命名路由

有時候，通過一個名稱來標識一個路由顯得更方便一些，特別是在連結一個路由，或者是執行一些跳轉的時候。你可以在建立 Router 例項的時候，在 routes 配置中給某個路由設定名稱

{
		path:"/seller:id",//通過不同的id來使不同的商家都使用同一個元件，id可傳可不傳
		name: seller,
		component: Seller,
}

要連結到一個命名路由，可以給 router-link 的 to 屬性傳一個物件，物件中可傳遞引數：

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

6.命名檢視

有時候想同時 (同級) 展示多個檢視，而不是巢狀展示，例如建立一個佈局，有 sidebar (側導航) 和 main (主內容) 兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果 router-view 沒有設定名字，那麼預設為 default。

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

每個路由都被渲染了兩次

<router-view name='sidebar'></router-view>
<router-view name='main'></router-view>

一個檢視使用一個元件渲染，因此對於同個路由，多個檢視就需要多個元件。確保正確使用 components 配置 (帶上 s)：

routes: [
	{
  		path: '/',
  		components: {
    			default: Main,
    			sidebar: Sidebar,
    			main: Main
  		}
	}
]

7.重定向和別名

重定向
重定向(Redirect)就是通過各種方法將各種網路請求重新定個方向轉到其它位置,用於網站調整或網頁被移到一個新地址,它也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

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

別名

/a 的別名是 /b，意味著，當用戶訪問 /b 時，URL 會保持為 /b，但是路由匹配則為 /a，就像使用者訪問 /a 一樣。簡單的說就是給 /a 起了一個外號叫做 /b ,但是本質上還是 /a

上面對應的路由配置為：

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

『別名』的功能讓你可以自由地將 UI 結構對映到任意的 URL，而不是受限於配置的巢狀路由結構。

8.程式設計式導航

除了使用 建立 a 標籤來定義導航連結，我們還可以藉助 router 的例項方法，通過編寫程式碼來實現

router.push('/');//字串
router.push({path: '/'});//物件
router.push({
		name: 'homePage',
		params: {
			id: '123'
		     }
	})//命名路由

#router.replace()與router.push()類似，但router.push()會像history棧新增記錄，可以通過router.go(n)來向前和向後多少步來切換路由，router.replace()不會

9.路由元件傳參

布林模式
如果 props 被設定為 true，route.params 將會被設定為元件屬性

routes: [
	{ 
		path: '/user/:id', 
		component: User, 
		props: true 
	}
]

物件模式
如果 props 是一個物件，它會被按原樣設定為元件屬性。當 props 是靜態的時候有用

routes: [
	{ 
		path: '/promotion/from-newsletter', 
		component: Promotion, 
		props: { 
			newsletterPopup: false 
		} 
	}
]

函式模式
你可以建立一個函式返回 props。這樣你便可以將引數轉換成另一種型別，將靜態值與基於路由的值結合等等

routes: [
	{ 
		path: '/search', 
		component: SearchUser, 
		props: (route) => ({ 
			query: route.query.q 
		}) 
	}
]

#<router-link></router-link>也可以傳遞引數，子元件使用props接收

<router-link :seller='seller'></router-link>