[toc]
# Vue 路由
## vue router 中主要提供了幾個組件？分別是干什么用的？
答：兩個。
router-link ：制作一個路由跳轉的按鈕，比如：<router-link to="/login">登錄</router-link>
router-view：顯示注冊的路由頁面，比如：<router-view />
## keep-alive 是干什么用的？怎么用？
答：一個路由在切換時會被銷毀，之前的數據全部丟失，下次再訪問這個組件時，需要重新創建，重新調接口，重新渲染，我們可以使用 keep-alive 把組件緩存起來，這樣在組件切換時，這個組件并沒有被銷毀，下次訪問時，可以就可以顯示出來，而且原組件中數據還在。
把需要緩存的組件使用 keep-alive 套起來即可。比如：把所有路由頁面都緩存起來，在切換時不銷毀：
~~~
<keep-alive>
<router-view />
</keep-alive>
~~~
還可以使用 include 和 exclude 來設置哪些緩存，哪些不緩存，比如：不緩存登錄頁：
~~~
<keep-alive exclude="login">
<router-view />
</keep-alive>
~~~
## 如何實現路由跳轉？
答：
方式一、router-link 制作按鈕
方式二、JS 中使用
this.$router.push(路徑)
this.$router.back() // 返回上一個頁面
this.$router.go(-1) // 返回 上一個頁面
## 如何接收路由參數？
答：路由參數有兩種形式：`query` 和 `params`。
形式一 query 、
直接在跳轉的地址后面添加 `?`，比如 /users?id=100&page=1
在下個頁面中接收使用 `this.$route.query.id`
形式二 params 、
需要先在路由配置中的 path 屬性上配置：如：`path: '/users/:id'`
然后在跳轉時在路由上添加：比如：`/users/100`
在下個頁面中接收使用 `this.$route.params.id`
## 配置一個路由需要幾個屬性？
答：至少2個：`path` 和 `component` ，其它的還有：
path：路徑
component：頁面組件
name: 路由名稱
children：子路由頁面
meta：設置其他的信息
## vue router 中有幾個鉤子函數（導航守衛）？項目中一般用來干什么用？
答：
導航守衛：一個回調函數，這個函數會在每次路由跳轉時執行。
- beforeEach：在每次路由跳轉之前執行。
- afterEach：在每次路由跳轉完之后執行。
- beforeEnter：寫在某一個路由中，當進入這個路由時觸發的。
- 組件內守衛：寫在組件中的路由，當進入這個組件時才觸發。
* `beforeRouteEnter`：當前進入前
* `beforeRouteUpdate`(2.2 新增)：路由更新時
* `beforeRouteLeave`：離開這個組件時
- beforeResolve：所有組件解析完，跳轉前執行。
基于它的特點，`beforeEach` 中非常適合編寫權限功能，比如：必須登錄才能進入我的訂單頁面。可以在每次跳轉之前執行 beforeEach 然后在 beforeEach 中判斷，如果要進入訂單頁面必須要先登錄。
商城后臺項目中使用它來進行權限判斷！
## vue router 中的 beforeEach 鉤子函數（導航守衛）中有幾個參數？分別是干什么用的？
答：三個參數。
to：對象，將要跳轉到的路由對象。
from：對象，跳轉前的路由對象。
next：函數，用來跳轉的函數，在鉤子函數中必須要調用這個函數，有三種情況：
next()：進入下一個頁面。
next(false)：阻止本次跳轉（不跳轉）。
next(路徑）：跳轉到這個指定的路徑。
示例、比如必須登錄才能進入 /main 頁面，如果沒有登錄就跳轉到登錄頁面。
router/index.js
~~~
// 定義一個全局守衛，在每次跳轉之前執行
router.beforeEach( (to,from,next)=>{
// 判斷是否要去 /main 頁面
if(to.path === 'main') {
// 判斷有沒有令牌
if(localStorage.getItem('token') === null) {
// 跳轉到登錄頁
next('/login')
} else {
// 放行
next()
}
} else {
// 直接跳轉過去
next()
}
})
~~~
## 如何在一個頁面中配置子路由頁面？
答：
第一步：在 `router/index.js` 中使用 `children` 屬性配置子路由頁面
第二步：在頁面中添加 `router-view` 組件顯示子頁面
## vue router 的路由模式有幾種？
兩種模式：`hash` 和 `history`。
hash 模式的效果是在 URL 后面添加 `#` ，比如：http://localhost:8080/#/login
history 模式的效果沒有 # 號，如：http://localhost:8080/login
注意：history 模式的項目在上線部署時，服務器需要額外配置，否則不能在頁面中刷新，一刷新就會找不到頁面。
