[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 模式的项目在上线部署时，服务器需要额外配置，否则不能在页面中刷新，一刷新就会找不到页面。
