前言:导航守卫一共被分为3类:全局守卫,单个路由独享守卫,组件内守卫。
导航:表示路由正在发生改变
谨记:参数或查询的改变并不会触发进入/离开的导航守卫,可以使用beforeRouteUpdate来应对这些变化,或者通过观察$route
一、全局守卫
1.全局前置守卫
//一般是写在main.js里
router.beforeEach((to, from, next) => {
//模拟登录检测
const token = false;
if(token) {
//已登录
next();
}else{ //未登录
if(to.path === '/login') next();
else{next('/login')}
}
}) //参数本身是一个回调函数
2.全局后置钩子
router.afterEach((to, from) => {
})
二、路由独享守卫
const routes = [
{
path: '/cart',
component: () => import('@/views/Cart.vue'),
beforeEnter: (to, from, next) => {....}
}
]
三、组件内守卫
1.beforeRouteEnter
2.beforeRouterUpdate
3.beforeRouterLeave
export default {
beforeRouteEnter(to, from, next) {....}
beforeRouteUpdate(to, from, next) {
}
beforeRouteLeave(to, from, next) {....}
}