目录
一:全局路由守卫
1.全局前置路由守卫
2.全局后置路由守卫
二:独享路由守卫
三:组件内路由守卫
Vue全局前置路由守卫——初始化的时候,每次路由切换之前被调用
在路由文件里使用,可以通过使用to和from来判断,再使用next()允许放行
router.beforeEach((to,from,next) => {
.......
next()
})
to(去哪个路由):结果是一个对象,对象中包含要去的路由的name,path等等
from(来自哪个组件):结果是一个对象,对象中包含来自哪个组件路由的name,path等等
next(放行):必须使用 next() 才能去你需要去的路由组件
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 里允许离开