vue 路由拦截的几种方法

1.全局前置守卫

Vue Router 提供了全局前置守卫，它可以在路由切换之前对请求进行拦截。全局前置守卫可以用来检查用户是否已经登录，或者检查用户是否具有访问该页面的权限。在router/index.js 中添加以下代码

export function createRouterGuards(){
    try{
        router.beforeEach((to,from,next)=>{
            if(to.meta.noLogin){
                next()
            }else{
                if(getSessionStorage('token')){
                    if(getSessionStorage('menuCodeList').includes(to.meta.menuCode)){
                        next()
                    }
                }
            }
        
        })
    }
}

2.路由独享守卫

在Vue Router 中，可以为每个路由单独设置守卫，这种守卫成为路由独享的守卫。路由独享的守卫可以用来检查路由参数、调用异步接口、处理数据等。在router/index.js 中添加以下代码

const router = new VueRouter({
    routes:[{
        path:'/example/:id',
        component:Example,
        beforeEnter:(to,from,next)=>{
            const id = to.params.id
            if(id > 0 && id < 100){
                next()
            }else{
                next('/error')
            }
        }
    }]
})

这个代码片段会在路由 /example/:id 的切换之前执行，检查传入的参数 id 是否满足条件，如果不满足则跳转到 /error 页面，否则就继续进行路由切换。路由独享的守卫是一种非常灵活的路由拦截方式，可以让我们更灵活地控制路由的切换

3.全局后置钩子

与全局前置守卫类似，Vue Router 还提供了全局后置钩子，它可以在路由切换之后对响应进行拦截。全局后置钩子可以用来处理路由切换之后的一些逻辑问题，如页面统计、错误处理等。在router/index.js 中添加以下代码

router.afterEach((to,from)=>{
    const currentPath = to.path;
    const params = to.params;
    console.log(`切换到${currentPath}页面，路由参数为${JSON.stringify(params)}`)
})

这个代码片段会在每次路由切换之后执行，输出当前路由页面的路径和参数。通过全局后置钩子，我们可以更好地了解路由状态和相应的结果，以便对项目进行下一步的开发和测试。