vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。可以把守卫理解为一个保安,负责控制是否通过。
1. 全局守卫 (是由router对象调用)
前置守卫 router.beforeEach((to,from,next)=>{})
后置守卫 router.afterEach((to,from)=>{})
// to 要去的路由对象
// from 来的路径
// next 要去的路径
我们利用全局的前置守卫来写一个判断是否登录的例子
router.beforeEach((to,from,next)=>{
//console.log(to)
//console.log(from)
//next()
let token = false
if(token){ //已登录
next()
}else{ //未登录
//判断要去的页面是不是登录页面
if(to.path == '/login'){
next()
}else{
next('/login')
}
}
2. 组件内守卫钩子
//进入
beforeRouteEnter(to,from,next){}
//修改
beforeRouteUpdate(to,from,next){}
- 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
- 由于会渲染同样的 foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
- 可以访问组件实例 `this`
//离开
beforeRouteLeave(to,from,next){}
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
3. 路由独享守卫(不常用)
不想让一个守卫变成全局的,就可以在这个路由中写一个守卫,beforeEnter((to,form,next)=> {})
beforeEnter((to,form,next)=> {})