全局守卫(导航)
在router文件夹下index.js
router.beforeEach 全局前置守卫,在进入路由之前
router.beforeResolve 全局解析守卫,在beforeRouteEnter调用之后调用
router.afterEach 全局后置守卫,进入路由之后
// 全局解析守卫
router.beforeResolve((to,from.next) => {
})
路由独享守卫(导航)
在router文件夹下index.js的ruoter对象上
beforeEnter:在进入路由之前
beforeEnter: (to, from, next) => {
if(from.name === 'about'){
alert("这是从about来的")
}else{
alert("这不是从about来的")
}
next(); // 必须调用来进行下一步操作。否则是不会跳转的
}
组件内守卫(导航)
在组件的文件上
beforeRouteEnter:在进入路由之前
beforeRouteUpdate:路由复用同一个组件时
beforeRouteLeave: 离开当前路由时
beforeRouteLeave (to, from, next) {
const leave = confirm("确定要离开吗?");
if(leave) next() // 离开
else next(false) // 不离开
},