前言
今天花一天時間閱讀完Vue Router的官方文檔的基礎部分，簡單的做一下總結和記錄
Vue Router是什么
Vue Router 是 Vue.js 官方的路由管理器，用於構建單頁應用(SPA)。地址欄url的變化並不會去發請求去服務器取新的頁面，而是按需加載局部組件，看起來就像無刷新一樣。包括的功能包括：
- 嵌套的路由/視圖表
- 模塊化的、基於組件的路由配置
- 路由參數、查詢、通配符
- 基於 Vue.js 過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
實際上路由的用途是用路由配置表來控制 url 對應的跳轉地址，地址對應的可以是基礎視圖組件或者布局組件，可以用於靈活的視圖導航。
安裝
-
直接下載 / CDN
下載地址：https://unpkg.com/vue-router/dist/vue-router.js
然后通過js引入進來：<script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script> -
NPM
安裝npm包：
npm install vue-router然后通過Vue.use()引入：
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
基本用法
Vue Router的API和Vuex類似，new VueRouter 構建出一個路由實例，然后提供了<router-link> 組件用於寫鏈接，<router-view> 組件用於展示，Router的構建選項中最重要的就是 routes ，它用來定義路由的規則。
一個簡單的路由例子：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<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>
// 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({
router
}).$mount('#app')
// 現在，應用已經啟動了！
動態路由
通過使用:動態路徑參數來做動態路由，使用通配符 (*)來匹配任意路徑，作為捕獲任意路徑和404路徑。詳細請參考：鏈接地址
嵌套路由
路由是支持嵌套的，routes中的 children 配置用來寫嵌套路由配置，然后嵌套的路由可以在組件的 <router-view> 做嵌套展示。
編程式的導航
除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實例方法，通過編寫代碼來實現。主要采用router.push(location, onComplete?, onAbort?)這個方法，另外還提供了router.replace(location, onComplete?, onAbort?) ，router.go(n)這兩個不常用的方法，具體用法參考：鏈接地址
命名路由
除了直接用 path 指定路由的路徑外，可以用 name 給路由取一個別名方便使用，具體參考：鏈接
命名視圖
可以給視圖也取名字方便使用， router-view 組件的 name 屬性指定，不給的話默認為 default 名字的。
重定向和別名
重定向也是通過 routes 配置來完成，配置采用 redirect 。例子：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
別名采用 alias 來命名。
路由組件傳參
使用 props 將組件和路由解耦，讓路由可以傳參數給組件，達到動態配置目的。例子：
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 對於包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
props 可以是布爾、對象和函數，具體用法參考：鏈接地址
HTML5 History 模式
vue-router 默認 hash 模式 ，會讓url地址里面帶有#符號，非常丑陋而且讓錨點語法無法使用，所以需要 history 模式，例子：
const router = new VueRouter({
mode: 'history',
routes: [...]
})
路由懶加載
結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載(路由被訪問的時候才加載對應組件)。例子：
routes: [
{
path: "/user",
component: () =>
import(/* webpackChunkName: "layout" */ "./layouts/UserLayout")
}
]
路由的其他主題
其他主題包括：
對於這些主題，感興趣的可以再點擊鏈接學習，根據2/8定律，不作為學習的重點，用到再看。