路由守卫
组件的生命周期(钩子函数)
1.beforeCreate(){}:组件创建之前
2.created(){}:组件创建完成
3.beforeMount(){} :组件模板挂载之前
4.mounted(){}:模板挂载完成
5.beforeUpdate(){}:组件数据更新之前
6.updated(){}:组件数据更新完成
7.beforeDestroy(){}:组件销毁之前
8.destroyed(){}:组件销毁后
全局路由守卫&&路由独享守卫
1.全局前置守卫
在组件解析之前触发导航时调用:(参数to和from都是路由对象Route)
to:即将要跳转的目标路由对象
from:即将要离开的目标路由对象
next():回调的函数(必须执行),在前置守卫中通过to获取对应参数,判断相对应跳转的组件或者其他操作(如果不写next()函数将进入死循环)
next()是一个函数,该函数的使用方法
** next(): 无参数直接执行,表示进入下一个 生命周期,如果所有的 钩子函数都执行完了(生命周期/守卫),则导航状态就是confirmed(确认的)
** next(false): 中断当前导航,重置到 from 路由对应的地址。
** next(’/xx’) or next({path:’/xxx’}): 中断当前的导航, 进行一个新的导航,跳转到一个指定的 地址。可传参数 与 route.push方法一致
** next(error): 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调
beforeEach((to,from,next)=>{
console.log(to.meta)
next()
})
2.全局解析守卫 (在组件解析之后调用)
具体的使用带业务逻辑进行编辑和调用,通过to和from的传参进行对应的逻辑处理
beforeReslove((to,from,next)=>{
document.title = to.matched[0].meta.title;
console.log(to.meta)
next()
})
3.全局后置钩子
在所有路由跳转结束的时候调用(离开组件进行调用,通过to和from的解析和参数的传递进行判断,具体业务逻辑具体实现)
afterEach((to, from)=>{
console.log(to.meta)
})
4.(路由独享守卫)用法和beforeEach()一样,在它之后执行,在其他守卫之前
beforeEnter(()=>{
document.title = to.matched[0].meta.title;
next()
})
组件路由守卫
1.组件渲染时被调用
此时获取不到this实例对象,next()//进入下一个钩子函数
beforeRouteEnter (to, from, next) {
next(vm => {
//可以通过回调访问 此时能获取对应的实例对象以及对vue实例进行具体操作
})
}
2.组件再次调用(重用时)
组件重新调用时会调用该函数,此时能获取对应的实例对象以及对vue实例进行具体操作
beforeRouteUpdate(to, from, next) {
cosole.log(to)
next( )
}
3.组件离开时进行调用,
当前组件离开时被调用,可以访问当前组件的this实例以及vue实例对象
beforeRouteLeave(to, from, next) {
cosole.log(to)
next( )
}
补充 路由守卫的调用顺序:
beforeRouteLeave (离开组件的)
beforeEach(全局路由)
beforeRouteEnter(跳转到的路由组件内的)
afterEach(全局路由)
vue实例的生命周期