1. 全局守卫
router.beforeEach((to, from, next) => {
console.log('before each')
next()
})
router.beforeResolve((to, from, next) => {
console.log('before resolve')
next()
})
router.afterEach((to, from) => {
console.log('after each')
})
beforeEach 用于校验
router.beforeEach((to, from, next) => {
console.log('before each')
if (to.fullPath === '/app') {
next('/login')
} else {
next()
}
})
2. 路由独享的守卫
beforeEnter, 在beforeEach与beforeResolve中间执行
{
path: '/app',
name: 'app',
component: Todo,
beforeEnter (to, from, next) {
console.log('before eanter')
next()
}
},
3. 组件内的守卫
export default {
beforeRouteEnter (to, from, next) {
console.log('beforeRouteEnter')
next()
},
beforeRouteUpdate (to, from, next) {
console.log('beforeRouteUpdate')
next()
},
beforeRouteLeave (to, from, next) {
console.log('beforeRouteLeave')
if (global.confirm('are you leave?')) {
next()
}
}
}
- beforeRouteEnter 在beforeEnter之后,在beforeResolve之前触发
- beforeRouteUpdate 路由更新 在同一个组件,用在两个地方切换时会触发
<router-link to='/login/123?cc=999'>login123</router-link>
<router-link to='/login/456?cc=aaa'>login456</router-link>
- beforeRouteLeave 判断页面是否离开
4. 组件异步加载,而不是一次全部加载所有的组件
{
path: '/login/:id',
component: () => import('../views/login/login.vue'),
props: (route) => ({
id: route.query.cc
})
}
需要安装插件babel-plugin-syntax-dynamic-import
在.babelrc中plugins配置syntax-dynamic-import