导航守卫

最新推荐文章于 2023-12-23 21:48:34 发布

原创最新推荐文章于 2023-12-23 21:48:34 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

Vue Router 专栏收录该内容

2 篇文章

订阅专栏

前言：导航守卫一共被分为3类：全局守卫，单个路由独享守卫，组件内守卫。

导航：表示路由正在发生改变

谨记：参数或查询的改变并不会触发进入/离开的导航守卫，可以使用beforeRouteUpdate来应对这些变化，或者通过观察$route

一、全局守卫

1.全局前置守卫

//一般是写在main.js里

router.beforeEach((to, from, next) => {
    //模拟登录检测
    const token = false;
    if(token) {
        //已登录
        next();
    }else{ //未登录
        if(to.path === '/login') next();
        else{next('/login')}
    }


})  //参数本身是一个回调函数

2.全局后置钩子

router.afterEach((to, from) => {


})

二、路由独享守卫

const routes = [

    {
        path: '/cart',
        component: () => import('@/views/Cart.vue'),
        beforeEnter: (to, from, next)  => {....}

    }


]

三、组件内守卫

1.beforeRouteEnter

2.beforeRouterUpdate

3.beforeRouterLeave

export default {
    beforeRouteEnter(to, from, next) {....}

    beforeRouteUpdate(to, from, next) {
        
    
    }
    
    beforeRouteLeave(to, from, next) {....}

}