Vue路由守卫

目录

一:全局路由守卫

1.全局前置路由守卫

2.全局后置路由守卫

二:独享路由守卫

三:组件内路由守卫


一:全局路由守卫

1.全局前置路由守卫

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

在路由文件里使用,可以通过使用tofrom来判断再使用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 里允许离开

你可能感兴趣的:(Vue2,vue.js,前端,javascript)