Vue路由守卫

目录

一:全局路由守卫

1.全局前置路由守卫

2.全局后置路由守卫

二:独享路由守卫

三:组件内路由守卫

---

一:全局路由守卫

1.全局前置路由守卫

Vue全局前置路由守卫——初始化的时候，每次路由切换之前被调用

在路由文件里使用，可以通过使用to和from来判断，再使用next（）允许放行

router.beforeEach((to,from,next) => {
    .......
    
    next()
})

to（去哪个路由）:结果是一个对象，对象中包含要去的路由的name，path等等

from（来自哪个组件）:结果是一个对象，对象中包含来自哪个组件路由的name，path等等

next（放行）:必须使用 next() 才能去你需要去的路由组件

---

2.全局后置路由守卫

Vue全局后置路由守卫——初始化的时候，每次路由切换之前被调用

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

to（去哪个路由）:结果是一个对象，对象中包含要去的路由的name，path等等

from（来自哪个组件）:结果是一个对象，对象中包含来自哪个组件路由的name，path等等

---

二:独享路由守卫

routes:[
    {
        path:' ',
        component:xxx,
        ....,
        //独享路由守卫
        beforeEach: (to,from,next) => {
            .......
            next()
        }
    }
]

---

三:组件内路由守卫

该路由守卫写在路由组件里，与mounted，components等等同级

//当路由进入之前: 进入该路由组件时被调用
beforeRouteEnter (to, from, next) {
    
},
//当路由离开之前: 离开该组件时被调用
beforeRouteLeave (to, from, next) {
    
},

to（去哪个路由）:结果是一个对象，对象中包含要去的路由的name，path等等

from（来自哪个组件）:结果是一个对象，对象中包含来自哪个组件路由的name，path等等

next（）:beforeRouteEnter 里允许进入，beforeRouteLeave 里允许离开