[vue-router4快速入门] 5.全局导航守卫

我们这节课来介绍‘全局前置守卫’和‘全局后置钩子’
它们两个形式一样，我们一块介绍就行了，
全局前置守卫就是在进入一个路由之前会调用
全局后置钩子就是在进入一个路由之后会调用
我们在router.js文件中添加代码

const router = createRouter({
  history: createWebHistory(),
  routes,
})
// 增加
router.beforeEach((to, from) => {
  console.log('进入页面之前会调用')
  console.log('要进入的页面：' + to)
  console.log('上一个页面：' + from)
})
router.afterEach((to, from) => {
  console.log('进入页面之后会调用')
  console.log('要进入的页面：' + to)
  console.log('上一个页面：' + from)
})

在路由变化时，这两个方法就会被调用，比如我们从首页进入列表页时，控制台输出如下

beforeEach先执行afterEach后执行，
它们都接收两个参数，
to是要进入的页面的route对象，from是上一个页面的路由对象，我们打印一下就知道它里面都有什么了

这是我们列表页的路由对象

区别在于，如果在beforeEach的函数中返回false，就可以阻止进到下一个页面
我们现在写一个功能，不可以进入用户详情页

router.beforeEach((to, from) => {
  console.log('进入页面之前会调用')
  console.log(to)
  console.log(from)
  if (to.name === 'userDetail') {
    return false // 不准进入
  } else {
    return true
  }
})

根据路由的name属性判断，如果是用户详情返回false，这时我们就发现在用户列表页点击链接不会跳转页面了

在工作中这个判断可能需要异步，也是支持的

router.beforeEach(async (to, from) => {
  // canUserAccess() 返回 `true` 或 `false`
  return await canUserAccess(to)
})

以上是官网的例子

在工作中，beforeEach用到得最多的也是这样的场景，判断用户有没有权限访问某个页面，没有的话就返回false，用户就不能访问了

afterEach最常用的就是在进入一个页面以后，需要向后台发送埋点数据，方便运营人员做数据分析

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

关于导航守卫我就介绍一下用的最多的两个，还有好多其他形式的守卫，如果工作中遇到需要进入页面或者离开页面要做什么复杂功能时，一定要在官网看这块的文档，很有可能找到你正好需要的api。