vue-router全局导航守卫

为什么要使用导航守卫？

假设我们有一个需求是，在跳转到每个页面的时候，页面的title随页面的改变而改变。我们能想到的一个方法是在每个Vue组件的mounted生命周期函数中定义它的title属性，但是这样做不容易维护，多个页面比较复杂。
导航守卫能监听跳转的每个页面，使用导航守卫，就只需要在 一处代码修改title属性即可。

router.beforeEach((to,from,next)=>{
    // console.log(to)
    document.title=to.matched[0].meta.title
    next()
})

beforeEach的参数是一个箭头函数，该箭头函数有三个参数，to是我们跳转到的页面，from是来自哪个页面的跳转，next是个函数，必须调用，否则跳转失效，相当于放行。
如果组件没有嵌套，我们可以直接利用to…meta.title拿到title值（route里定义了元数据meta，并且在meta中定义了title属性），但是如果组件有子组件，title就是undefined，打印出to：
发现它还有一个matched属性，取matched[0]的meta，也就是第一层组件，就不会显示undefined了。
beforeEach可以用来设置登录拦截：

// 路由导航守卫 前置  next:放行 to:要访问的路径
router.beforeEach((to, from, next) => {
  // 登录页不需要权限 都能访问
  if (to.path === '/login') {
    return next();
  }
  // 获取token
  const token = window.sessionStorage.getItem('token');
  if (!token) {
    // 没有携带token，也就是没登录，重定向至登录页
    return next('./login');
  }
  next();
})

除了beforeEach（前置守卫guard），还有一个afterEach（后置钩子hook）函数，这是跳转完了之后的操作，所以不需要执行next函数。
beforeEach和afterEach都是导航守卫，也称全局守卫，除此之外，还有路由独享的守卫beforeEnter（进入该路由才能使用，在routes中定义），组件内的守卫。