前端｜Vue路由守卫使用注意事项
#前端 #Vue [字体 小·中·大]路由守卫用来跟踪和处理路由，路由守卫有前置路由守卫和后置路由守卫，分别是：beforeEach、afterEach，从他们的名字中可以清楚了解到，一个是在路由来临前触发，另一个是在路由结束后触发。
在开发中使用 beforeEach 比较多，因为在这个回调函数中可以对路由做很多预处理，例如：对登录进行安全验证，对特定路由拦截，对首页等公开资源进行放行等。
使用格式
1//to: 当前要访问的路由
2//from: 上一个路由
3//next: 用于对路由拦截放行，时能都通过该函数设置路由的一些属性
4router.beforeEach((to, from, next) => {
5 //TODO
6});
7
8router.afterEach(() => {
9 //TODO
10});
使用示例
1//路由守卫
2//使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登录,以及对路由里没有配置的情况进行404处理
3router.beforeEach((to, from, next) => {
4 // 路由发生变化，修改页面标题
5 if (to.meta.title) {
6 document.title = to.meta.title;
7 }
8 // 每次路由开始时，启动NProgress进度条
9 NProgress.start();
10
11 // 对错误路由的判断，如果匹配（match）到的路由不存在则进入错误页面error
12 if (to.matched.length === 0) {
13 from.name ? next({ name: from.name }) : next("/error");
14 } else {
15 // 正常进入的路由
16 // 判断token是否存在
17 if (Cookies.get("token") || to.fullPath.indexOf("/auth") !== -1) {
18 next(); //放行
19 NProgress.done();
20 } else {
21 // 对错误页面和认证页面放行
22 if (to.path === "/error") next();
23 if (to.path === "/auth") next();
24 // 其他情况转到认证页面
25 next("/auth");
26 }
27 }
28});
29
30router.afterEach(() => {
31 // 在每个路由结束后关闭，NProgress 进度条
32 NProgress.done();
33});
注意事项：
在使用 beforeEach 时路由易陷入循环，这种情况多是未对该放行的路由放行，例如要跳转到/error 页面，但是没有给他放行，此时路由就会陷入循环，因为跳转到/error 页面会进入该页面的路由，写。通常，在最后的 else 分支都要对白名单路由放行。