vue-router路由导航守卫

全局路由守卫 - 前置、后置

1. 全局前置路由守卫beforeEach：进行初始化时执行，在每一次路由切换前执行
   1. router.beforeEach(to, form, next)
   2. 三个参数解析
      • to：即将要进入的目标的路由对象
      • from：当前导航即将要离开的路由对象
      • next：调用该方法后，才能进入下一个钩子(相当于放行) — next()：放行，next(‘/login’)：强制跳转
2. 全局后置路由守卫afterEach：进行初始化时执行，在每一次路由切换后执行
   1. router.beforeEach(to, form, next)
   2. 参数同上
3. 例：使用全局前置路由守卫对页面进行鉴权、使用全局前置路由守卫修改页面标题

   // 路由配置文件中
   routes: [
       {
           // 给该路由命名为guanyv
           name: 'guanyv',
           path: '/about',
           component: () => import('../views/About.vue')
           // 自定义title属性和isAuth属性，用于在路由导航守卫中使用，给页面设置标题和权限校验
           meta: { title: '关于', isAuth: true}
       },	
       ...
   ]
   
   // 使用全局前置路由守卫对页面进行鉴权
   router.beforeEach((to, form, next) => {
       // 通过判断是否需要进行鉴权
       if (to.meta.isAuth) {
           if (localStroage.getItem('token') === 'xxxx') {
               // 符合条件，放行进入下一路由
               next()
           } else {
               console.log('校验失败')
           }
       }
   })
   
   // 使用全局后置路由守卫修改页面标题
   router.afterEach((to, form, next) => {
       // 判断即将进入的页面路由元信息中是否有title属性
       if (to.meta.title) {
           document.title = to.meta.title // 修改网页标题
       }
   })
   

独享路由守卫

1. beforeEnter：某一个组件路由单独使用的路由守卫，在进入该组件之前进行调用

   routes: [
       {
           name: 'guanyv',
           path: '/about',
           component: () => import('../views/About.vue')
           // 自定义title属性和isAuth属性，用于在路由导航守卫中使用，给页面设置标题和权限校验
           meta: { title: '关于', isAuth: true}
       	beforeEnter: (to, form, next) => {
               // 通过判断是否需要进行鉴权
               if (to.meta.isAuth) {
                   if (localStroage.getItem('token') === 'xxxx') {
                       // 符合条件，放行进入当前组件路由
                       next()
                   } else {
                       console.log('校验失败')
                   }
               }
           }
       },	
       ...
   ]
   

组件内路由守卫 - 前置、后置

1. 组件前置路由守卫beforeRouteEnter：通过路由规则进入该组件时调用
   1. router.beforeRouteEnter (to, form, next)
2. 组件后置路由守卫beforeRouteLeave：通过路由规则离开该组件时调用
   1. router.beforeRouteLeave (to, form, next)
3. 在需要使用的组件中进行使用

   export default {
       data() {
           return {}
       },
       methods: {},
       beforeRouteEnter(to, form, next) {},
       beforeRouteLeave(to, form, next) {}
   }