[toc]
# 题1、vue router 中主要提供了几个组件？分别是干什么用的？
答：两个。
router-link ：制作一个路由跳转的按钮，比如：<router-link to="/login">登录</router-link>
router-view：显示注册的路由页面，比如：<router-view />
# 题2、keep-alive 是干什么用的？怎么用？
答：一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，可以就可以显示出来，而且原组件中数据还在。
把需要缓存的组件使用 keep-alive 套起来即可。比如：把所有路由页面都缓存起来，在切换时不销毁：
~~~
<keep-alive>
<router-view />
</keep-alive>
~~~
还可以使用 include 和 exclude 来设置哪些缓存，哪些不缓存，比如：不缓存登录页：
~~~
<keep-alive exclude="login">
<router-view />
</keep-alive>
~~~
文档地址：[https://cn.vuejs.org/v2/api/#keep-alive](https://cn.vuejs.org/v2/api/#keep-alive)
# 题3、如何实现路由跳转？
答：
方式一、router-link 制作按钮
方式二、JS 中使用
this.$router.push(路径)
this.$router.back() // 返回上一个页面
this.$router.go(-1) // 返回 上一个页面
# 题4、如何接收路由参数？
答：路由参数有两种形式：
形式一、?后面，比如 /users?id=100&page=1
JS中使用 this.$route.query.id
形式二、/后面，比如：users/100/1
JS 中使用 this.$route.params.id
# 题5、配置一个路由需要几个属性？
答：至少2个：
path：路径
component：页面组件
name: 路由名称
children：子路由页面
meta：设置其他的信息
# 题6、vue router 中有几个钩子函数（导航守卫）？项目中一般用来干什么用？
答：
导航守卫：一个回调函数，这个函数会在每次路由跳转时执行。
- beforeEach：在每次路由跳转之前执行。
- afterEach：在每次路由跳转完之后执行。
- beforeEnter：写在某一个路由中，当进入这个路由时触发的。
- 组件内守卫：写在组件中的路由，当进入这个组件时才触发。
* `beforeRouteEnter`：当前进入前
* `beforeRouteUpdate`(2.2 新增)：路由更新时
* `beforeRouteLeave`：离开这个组件时
- beforeResolve：所有组件解析完，跳转前执行。
基于它的特点，`beforeEach` 中非常适合编写权限功能，比如：必须登录才能进入我的订单页面。可以在每次跳转之前执行 beforeEach 然后在 beforeEach 中判断，如果要进入订单页面必须要先登录。
商城后台项目中使用它来进行权限判断！
# 题7、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()
}
})
~~~
# 题8、如何在一个页面中配置子路由页面？
答：
第一步：在 router/index.js 中使用 `children` 属性配置子路由页面
第二步：在这个页面中添加 `router-view` 组件显示子页面
# 题9、vue router 的路由模式有几种？
