一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
前言
本文记录vue2的vue-router在使用过程中遇到的一些问题。
问题记录
路由守卫的应用
根据路由守卫绑定的位置不同，有下面三种路由守卫
全局守卫
beforeEach/beforeResolve/afterEach
路由独享守卫
beforeEnter
组件内的守卫
beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave
其完整的导航解析过程，看官方文档的说明是这样的：
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。- 调用全局的
beforeEach守卫。- 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。- 在路由配置里调用
beforeEnter。- 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。- 调用全局的
beforeResolve守卫 (2.5+)。- 导航被确认。
- 调用全局的
afterEach钩子。- 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数。
下面是几个常用钩子的实际应用场景：
beforeRouteLeave：跳转页面前，提醒用户，是否保存信息，或者自动为用户保存草稿。
beforeEach：判断是否登录、是否有权限等等，做跳转登录、申请权限、处理权限菜单等操作。
beforeRouteUpdate：重新进入相同页面时，重新初始化、加载数据。
beforeRouteEnter：获取当前页面的前一个页面的信息，比如我们在登录页，登录后要重定向到前一个页面，就可以通过这个钩子获取。注意：这里， 不！能！获取组件实例 this，因为新组件还没有被创建。不过，可以传一个回调，给next来访问实例，在创建好实例后，会执行。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
复制代码其他几个路由守卫，我这边不常用，有补充的观众欢迎留下评论。
动态路由实现权限控制
应用场景：管理端根据不同权限，需要展示不同的菜单栏，同时希望没有权限的用户无法访问某些页面。
解决方案：我们在进入路由前，做一个拦截，先判断是否需要处理页面权限，再判断是否已经处理了权限，如果回答都是“是”，我们不需要做处理。否则，请求接口，获取到当前用户的权限菜单，再根据后台返回的信息，给router动态添加路由，再重新进入路由（避免拦截的访问是新添加的路由，出现访问不到的问题）。
具体看下面的伪代码：
router.beforeEach((to, from, next) => {
if (needAuthority(to.name)) { //不需要判断权限的页面，不处理
next()
return
}
if (alreadyGetAuthorityMenu) { //已经处理过权限菜单，不再处理
next()
return
}
handleAuthority().then(()=>{
next({ ...to, replace: true }) //处理权限菜单接口成功，动态路由已经添加了，重新进入路由
}).catch(() => {
console.log('请求权限菜单接口错误')
next()
})
})
复制代码在handleAuthority中我们做了这些事情
- 判断是否有权限，没有权限的用户，跳转到权限申请页面
- 根据后台传过来的权限列表，用
router.addRoutes(routes: Array)这个API，给router动态添加需要权限控制的页面对应的路由。 - 给router动态添加一个兜底页面，可以是提示没权限的页面，或者简单一个404页面。
需要注意的是，动态添加路由后，需要next({ ...to, replace: true })重新进入路由，否则，如果拦截的页面路由，是你后面才添加的路由，那新的路由会访问不到。
hash模式的路由参数被干扰
应用场景：比如微信分享链接会加上，类似'?from=singlemessage&isappinstalled=0'这类的参数，当我们使用hash模式路由，同时使用params的方式传参数的时候，常常会被外界的参数干扰到，导致页面无法访问或者参数获取不到，使用动态路由参数是更好的选择。
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
const userId = '123'
// 两种跳转方式
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
复制代码更进一步，我们可以使用props，将组件和路由解耦，在组件中定义id这个props，就能拿到传递的参数。
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }
]
})
复制代码跳转同组件路由，不刷新？
应用场景：跳转同个组件的页面，但是参数不同，期望重新刷新页面。
解决方案：我们可以在beforeRouteUpdate中，重新执行进入页面要执行的代码，但如果需要初始化所有变量，难免有遗漏，更简单的方式是，监听route变化，有变化是 this.$router.go(0)刷新。
// 推荐
beforeRouteUpdate(to, from, next) {
// 重新加载数据
next();
},
复制代码watch: {
'$route'(to, from) {
this.$router.go(0)
}
}
复制代码