vue-router(路由守卫)

路由守卫

全局路由守卫

前置路由守卫

全局前置守卫 (router.beforeEach):
位置：在src/router/index.js文件中配置。
作用：对任何路由跳转（包括首次加载、手动导航、编程式导航）进行统一拦截。
示例代码：

  const router = new VueRouter({ /* ... */ });
   router.beforeEach((to, from, next) => {
     // 检查是否已登录（这里仅作为示例，实际应用中可能涉及更复杂的逻辑）
     if (!isAuthenticated) {
       // 未登录，重定向到登录页
       next('/login');
     } else {
       // 已登录，允许继续访问目标路由
       next();
     }
   });

后置路由守卫

全局后置钩子 (router.afterEach):
位置：同样在src/router/index.js文件中配置。
作用：在每次路由切换成功后执行，通常用于更新页面标题、埋点统计、页面缓存清理等工作，不涉及阻断路由访问。
示例代码：

  router.afterEach((to, from) => {
     document.title = to.meta.title || 'Default Title';
     // 或者进行其他通用的后处理操作
   });

路由独享守卫(beforeEnter)

位置：在定义路由配置对象时，直接在目标路由的配置内设置。
作用：仅对特定路由生效，执行特定的权限检查或其他业务逻辑。
示例代码：

 const routes = [
     {
       path: '/admin',
       component: AdminPanel,
       beforeEnter: (to, from, next) => {
         if (!isAdminUser) {
           next('/forbidden');
         } else {
           next();
         }
       },
       meta: { title: 'Admin Panel' }
     },
     // 其他路由...
   ];

组件路由守卫

位置：在路由组件内部编写。
分类：
beforeRouteEnter: 在进入路由前调用，不能访问当前组件实例（this不可用），但可以通过回调函数传递给next方法的数据访问。
beforeRouteUpdate: 路由参数变化时（路径相同而参数不同）调用，可以访问当前组件实例。
beforeRouteLeave: 离开当前路由时调用，可以访问当前组件实例。
示例代码（以beforeRouteEnter为例）:

   export default {
     data() {
       return { articleId: null };
     },
     beforeRouteEnter(to, from, next) {
       // 获取文章ID并异步加载数据
       fetchArticle(to.params.articleId)
         .then(article => {
           next(vm => {
             // 将数据注入到组件实例
             vm.article = article;
           });
         })
         .catch(() => next('/error'));
     }
   };

总结:，通过合理运用全局守卫、路由独享守卫和组件内守卫，可以实现对Vue应用路由访问的精细化控制，确保用户只能在满足特定条件（如身份验证、权限检查等）的情况下访问相应的页面。