概念

1. 守护路由权限，没有权限者不得跳转路由。
2. 判断权限的逻辑是在 router 配置文件中编写的。
3. 例：进入个人中心前要进行登陆状态的判断，只有登录的用户方可进入个人中心页。

全局前置路由守卫

检测路由变化，在路由跳转之前做一些处理（这里的处理通常指权限的判断）。

配置 router

router/index.js

……
// 创建 router 实例。
const router =  new VueRouter({
    routes: [
        {
            name: 'home',
            path: '/home',
            component: Home,
        },
        {
            name: 'about',
            path: '/about',
            component: About
        },
    ]
})

/* 全局前置路由守卫代码 */

// 向外暴露
export default router;

beforeEach API

1. 通过 beforeEach API 实现全局前置路由守卫功能。

2. 调用 beforeEach API 时需要传递一个回调函数，所有的工作在这个回调函数中完成。

3. 回调函数的 3 个参数

   • to：路由跳转的终点（目标路由）
   • from：路由跳转的起点。
   • next：他是一个方法，调用它可以实现路由跳转。如果没有 next，路由不会跳转。

4. 页面初始化和路由跳转前 Vue 自动执行回调函数。

5. 代码实现，根据缓存数据 isLogin 决定是否显示 About 组件

   /* 全局前置路由守卫 */
   router.beforeEach((to,from,next) => {
       if(to.name == 'about') {
           if(localStorage.getItem('isLogin') == 1) {
               next();
           } else {
               alert('未登录！');
           }
       } else next();
   })

6. 上面代码第 3 行我们判断了一下目标路由是否为 about，如果这里要判断的不止一个，按照惯例我们会用逻辑运算符进行拼接。除此之外我们还可以接触 router 的一个配置项来决定目标路由是某个组件时路由是否跳转。

meta 配置项

1. 在创建 router 实例时，若某个 route 需要进行跳转前的校验，可在 meta 配置项中敲一个标识。

2. 在设置全局前置路由守卫时，判断标识即可

3. 代码实现

   // 创建 router 实例。
   const router =  new VueRouter({
       routes: [
           {
               name: 'home',
               path: '/home',
               component: Home,
           },
           {
               name: 'about',
               path: '/about',
               component: About,
               meta: { isLoginAuth: true }
           },
       ]
   })
   
   /* 全局前置路由守卫 */
   router.beforeEach((to,from,next) => {
       if(to.meta.isLoginAuth) {
           if(localStorage.getItem('isLogin') == 1) {
               next();
           } else {
               alert('未登录！');
           }
       } else next();
   })

全局后置路由守卫

用的不多，同全局前置路由守卫，也需要调用 afterEach API ，在 API 的回调中做操作。

 /* 全局后置路由守卫 */
router.afterEach((to,from) => {
    console.log(to,from);
})

独享路由守卫

1. 独享路由守卫只有前置，没有后置。

2. 独享路由守卫是为单独一个路由配置项服务的。

3. 使用时只要在路由配置项中加入 beforeEnter 即可。

4. 代码实现

   // 创建 router 实例。
   const router =  new VueRouter({
       routes: [
           {
               name: 'home',
               path: '/home',
               component: Home,
           },
           {
               name: 'about',
               path: '/about',
               component: About,
               beforeEnter: (to, from, next) => {
                   if(to.name == 'about') {
                       if(localStorage.getItem('isLogin') == 1) {
                           next();
                       } else {
                           alert('未登录！');
                       }
                   } else next();
               }
           },
       ]
   })

组件路由守卫

1. 组件路由守卫是写在组件的配置信息里的。

2. 通过 beforeRouteEnter 和 beforeRouteLeave 两个配置项完成的。

3. beforeRouteEnter 进入守卫，通过路由规则进入该组件时被调用。

4. beforeRouteLeave 离开守卫，通过路由规则离开该组件时被调用。

5. 参数：to，from，next

6. 代码实现：About.vue

   export default {
     name: 'About',
   
     // 进入守卫，通过路由规则进入该组件时被调用。
     beforeRouteEnter (to, from, next) {
       console.log("About -- beforeRouteEnter",to,from);
       next();
     },
   
     // 离开守卫，通过路由规则离开该组件时被调用。
     beforeRouteLeave (to, from, next) {
       console.log("About -- beforeRouteLeave",to,from);
       next();
     }
   };