导航，指的路由正在发生变化。

一、分类

  1. 全局导航守卫
  2. 路由独享守卫
  3. 组件内的守卫

    二、全局前置守卫

    在进入任何路由之前，都会触发全局前置守卫。
    在路由配置文件 /src/router/index.js 中配置全局前置守卫：
    1. const router = new VueRouter({ ... })
    2. // 全局前置守卫
    3. router.beforeEach((to, from, next) => {
    4.   // 进入任何路由前都会触发该函数
    5. })
    一旦在应用中加上全局前置守卫，进入任何路由前都会触发上面的箭头函数。函数中接收三个形参：
  • to：表示即将要进入的路由对象；
  • from：表示当前导航正要离开的路由；
  • next：控制路由执行的函数；

    1、案例

    我们可以在前置守卫中判断进入首页的用户是否登录：
    1. router.beforeEach((to, from, next) => {
    2.   // 判断用户是否进入首页
    3.   if(to.path.includes('/home')) {
    4.       // 如果用户进入的是首页，我们可以判断用户是否登录
    5.       if(/* 如果用户已登录 */) {
    6.           next();
    7.       } else {
    8.           alert("你还未登录，请先登录。");
    9.           next('/login')   // 跳转到登录页面
    10.       }
    11.   } else {
    12.       next();  // 如果不是进入首页，就让用户可以直接进入
    13.   }
    14. })

    三、路由独享前置守卫

    在路由配置文件中，找到指定的路由，设置路由独享的前置守卫：
    1. const routes = [
    2.   {
    3.       path: '/home',
    4.       name: 'Home',
    5.       component: Home,
    6.       // 前置路由独享守卫
    7.       beforeEnter: (to, from, next) => {
    8.             // ...
    9.       }
    10.   }
    11. ]

    四、组件内的后置守卫

    在组件中，设置组件的后置守卫：
    1. export default {
    2.     beforeRouteLeave (to, from, next) {
    3.     // 导航离开该组件的对应路由时调用
    4.     // 可以访问组件实例 `this`
    5.   }
    6. }