1.什么是导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。通俗点讲就是一个拦截器。
2.导航守卫分类
全局守卫
beforeEach（全局前置）、beforeResolve（全局解析）、afterEach（全局后置）
（在路由实例对象注册使用，写在main.js中）
代码举例（结合sessionStorage实现登录拦截）：
router.beforeEach( (to,from,next) => {
console.log('-----全局前置守卫.');
let path = to.path;
console.log("--------path = "+path);
let ckLogin = false; // 检查是否登录
if( sessionStorage.getItem("userinfo") ){
ckLogin = true;
}
//
if( true ){
next(); // 放行
}else{
next("/login");
}
} );
路由守卫
beforeEnter（在路由配置项中项定义，写在路由js中）
代码举例（只拦截固定的路径）：
{
path: '/test4',
name: 'Test4',
component: () => import('../views/test4.vue'),
beforeEnter:(to,from,next) => {
console.log("-----路由守卫 test4");
next();
}
}
组件守卫
beforeRouteEnter（进入vue页面）、beforeRouteUpdate（vue页面修改）、beforeRouteLeave（vue页面离开）
（在组件属性中定义，写在vue页面中）
代码举例（离开vue页面时提示）：
export default {
name: 'Test6',
data () {
return {
key: '测试-路由6',
id:0,
title:''
}
},
beforeRouteLeave(to,from,next){ // 组件守卫-离开组件
let ck = confirm('是否离开？');
if(ck){
next();// 放行
}else{
next(false) ; // 拦住
}
}
}
3. 参数解释
具体
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' })，
next({ name: 'login', params: { path: route.path } }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
注意
全局后置守卫（afterEach），是没有 next 的，因为到这以及完全结束没法跳了。