全局前置、后置路由守卫

1. router/index.js

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import List from '@/pages/List'
   Vue.use(VueRouter);
   const router = new VueRouter({routes: [{path: '/list',component: List,meta: {  // 路由元数据title: '列表'...   // 可自定义配置参数}}]
   });
   // 前置：在路由切换之前调用
   router.beforeEach((to, from, next) => {});
   // 后置：在路由切换成功之后调用
   router.afterEach((to, from) => {});
   export default router; 
   

2. 说明
   ① router.beforeEach()是全局前置路由守卫
   ② router.afterEach()是全局后置路由守卫
   ③ to：目的地路由信息
   ④ from: 出发地路由信息
   ⑤ next：是个函数，只有调用next()，路由器才可继续跳转，不调用直接拦截
   ⑥ routes中的meta配置项，可配置一些自定义的参数

独享路由守卫

1. router/index.js

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import List from '@/pages/List';
   import Detail from '@/pages/Detail';
   Vue.use(VueRouter);
   export default new VueRouter({routes: [{path: '/list',component: List,children: [{path: 'detail',component: Detail,// Detail组件独享此路由守卫beforeEnter: (to, from, next) => {}}]}]
   });
   

2. 说明
   ① 组件内部的beforeEnter()是独享前置路由守卫
   ② 独享路由守卫只有前置没有后置
   ③ 独享路由守卫与全局路由守卫可一起搭配使用

组件内路由守卫

1. Detail组件

<template><div></div>
</template>
<script>
export default {name: 'Detail',// 通过路由，进入组件之前调用beforeRouteEnter(to, from, next) {},// 通过路由，离开组件之前调用beforeRouteLeave(to, from, next) {}
}
</script>

2. 说明
   ① beforeRouteEnter()，通过路由，进入组件之前被调用
   ② beforeRouteLeave()，通过路由，离开组件之前被调用
   ③ 两者都需要调用next()放行