路由导航守卫

详情可以参考vue-router文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

1、什么是导航守卫

①vue-router提供的导航守卫主要用来监听监听路由的进入和离开的

②vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

例如：我们可以利用beforeEach来完成标题的修改

我们可以在钩子当中定义一些标题, 可以利用meta来定义

导航钩子的三个参数解析:

to: 即将要进入的目标的路由对象 .

from: 当前导航即将要离开的路由对象 .

next: 调用该方法后 , 才能进入下一个钩子 .

 //自己手动实现必须调用一下next，因为他本来的函数中就调用了next，现在要自己定义，就需要自己调next 

//前置守卫（guard）
router.beforeEach((to, from, next) => {
  //已知是从from跳转到to
  document.title = to.matched[0].meta.title;
  //自己手动实现必须调用一下next，因为他本来的函数中就调用了next，现在要自己定义，就需要自己调next
  console.log(to)
  next();
})

这里的：

to.matched[0].meta.title

如果跳转的路径是/Home/HomeNews，

那么matched[0]是/Home，matched[1是/Home/HomeNews

2、更多应用

如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.

还有路由独享守卫，如下定义到router中即可

 {
    path: '/about',
    //meta表示原数据
    meta: {
      title: '关于'
    },
    beforeEnter: (to, from, next) => {
      console.log("路由独享守卫");
      //自己手动实现必须调用一下next，因为他本来的函数中就调用了next，现在要自己定义，就需要自己调next
      next();
    },
    component: About
  }

 

详情可以参考vue-router文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB