Vue-router 路由生命周期
Vue-router 路由生命周期也叫导航守卫
分3块:全局守卫、路由独立守卫、组件内守卫
1、全局守卫 main.js
router.beforeEach((to, from, next) => {
// 全局前置守卫
// if(to.fullPath === '/shoppingCart'){
// //如果没有登录?对不起先去登录一下
// next('/login')
// }
console.log('1 beforeEach', to, from)
next()
})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
// 全局解析守卫
console.log('3 beforeResolve', to, from)
next()
})
router.afterEach((to, from) => {
// 全局后置守卫、钩子
console.log('4 afterEach', to, from)
})
2、路由独立守卫 router.js
{
path: '/a',
name: 'pageA',
components:{
default:pageA,
ppp:Test
},
beforeEnter:(to,from,next)=>{
console.log('2 beforeEnter',to,from)
next()
},
},
3、组件内守卫 xxx.vue
export default {
beforeRouteEnter(to,from,next){
//这里 拿不到this
// 路由跳转,使用此组件时触发
console.log('beforeRouteEnter',to,from)
next()
},
beforeRouteUpdate(to,from,next){
//可以获取 this
// /a/123 /a/456 当 组件被复用时,触发此方法
console.log('beforeRouteUpdate',to,from)
next()
},
beforeRouteLeave(to,from,next){
//可以获取this
//路由跳转,不适用此组件时触发
console.log('beforeRouteLeave',to,from)
next()
}
}