路由守卫

• 路由守卫-导航守卫
• father::路由管理

梗概

• use::

  路由原生钩子

  1. 全局前置守卫（beforeEach）：在路由跳转之前执行，可以用来进行权限验证、页面加载前的操作等。
  2. 全局解析守卫（beforeResolve）：在路由组件被解析之后，渲染之前执行。
  3. 全局后置钩子（afterEach）：在路由跳转之后执行，可以用来进行日志记录、页面跳转之后的操作等。

  指向原始笔记的链接

• next() 放行
• next({下一个route}) 重定向，并且重定向后再次进行守卫逻辑
  • 即最终出口都是next()，不然会死循环

示例

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在跳转之前进行权限验证
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});
 
// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // 在路由组件被解析之后执行的操作
  console.log('Route component resolved');
  next();
});
 
// 全局后置钩子
router.afterEach((to, from) => {
  // 在路由跳转之后执行的操作
  console.log(`Navigated from ${from.path} to ${to.path}`);
});

在上面的示例中，我们展示了如何使用Vue Router中的路由守卫。全局前置守卫用来进行权限验证，全局解析守卫用来在路由组件被解析后执行操作，全局后置钩子用来在路由跳转后执行操作。这些路由守卫可以帮助我们控制路由跳转时的行为，增强应用程序的安全性和可控性。