[TOC] ***** Vue Router 是[Vue.js](http://cn.vuejs.org/)官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。 **包含的功能有：** * 嵌套的路由/視圖表 * 模塊化的、基于組件的路由配置 * 路由參數、查詢、通配符 * 基于 Vue.js 過渡系統的視圖過渡效果 * 細粒度的導航控制 * 帶有自動激活的 CSS class 的鏈接 * HTML5 歷史模式或 hash 模式，在 IE9 中自動降級 * 自定義的滾動條行為 ***** # :-: 安裝 ## 直接下載 / CDN ``` https://unpkg.com/vue-router/dist/vue-router.js ``` ``` <script src="/path/to/vue.js"></script> <script src="/path/to/vue-router.js"></script> ``` ## NPM ``` npm install vue-router ``` 如果在一個模塊化工程中使用它，必須要通過`Vue.use()`明確地安裝路由功能： ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 如果使用全局的 script 標簽，則無須如此 (手動安裝)。 # :-: 編程式的導航 | 聲明式 | 編程式 | | --- | --- | | `<router-link :to="...">` | `router.push(...)` | | `<router-link :to="..." replace>` | `router.replace(...)` | ~~~ const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 ~~~ ~~~ // 帶查詢參數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) ~~~ Vue Router 的導航方法 (`push`、`replace`、`go`) 在各類路由模式 (`history`、`hash`和`abstract`) 下表現一致。 # :-: 命名視圖 有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個布局，有`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`配置 (帶上 s)： ~~~ const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) ~~~ # :-: 重定向 重定向也是通過`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 重定向的 字符串路徑/路徑對象 }} ] }) ~~~ 注意[導航守衛](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)并沒有應用在跳轉路由上，而僅僅應用在其目標上。在下面這個例子中，為`/a`路由添加一個`beforeEach`或`beforeLeave`守衛并不會有任何效果。 # :-: 別名 “重定向”的意思是，當用戶訪問`/a`時，URL 將會被替換成`/b`，然后匹配路由為`/b`，那么“別名”又是什么呢？ **`/a`的別名是`/b`，意味著，當用戶訪問`/b`時，URL 會保持為`/b`，但是路由匹配則為`/a`，就像用戶訪問`/a`一樣。** 上面對應的路由配置為： ~~~ const router = new VueRouter({ routes: [ { path: '/a', component: A, alias: '/b' } ] }) ~~~ “別名”的功能讓你可以自由地將 UI 結構映射到任意的 URL，而不是受限于配置的嵌套路由結構。 # :-: 路由組件傳參 在組件中使用`$route`會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。 **通過`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`被設置為`true`，`route.params`將會被設置為組件屬性。 ## :-: 對象模式 如果`props`是一個對象，它會被按原樣設置為組件屬性。當`props`是靜態的時候有用。 ~~~ const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ] }) ~~~ ## :-: 函數模式 你可以創建一個函數返回`props`。這樣你便可以將參數轉換成另一種類型，將靜態值與基于路由的值結合等等。 ~~~ const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } ] }) ~~~ URL`/search?q=vue`會將`{query: 'vue'}`作為屬性傳遞給`SearchUser`組件。 請盡可能保持`props`函數為無狀態的，因為它只會在路由發生變化時起作用。如果你需要狀態來定義`props`，請使用包裝組件，這樣 Vue 才可以對狀態變化做出反應。