[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 才可以對狀態變化做出反應。
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request