vue中的路由拦截器的作用详解

router.beforeEach((to, from, next) => {
    // 检查用户权限
    if (!userAuthenticated) {
        next('/login'); // 未认证跳转到登录页
    } else {
        next(); // 已认证则放行
    }
});

router.beforeResolve((to, from, next) => {
    // 在导航被确认之前，进行数据加载等操作
    fetchData().then(() => {
        next();
    });
});

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}