Vue Router 导航守卫怎么做

Vue Router 是 Vue.js 的官方路由器，允许我们构建单页面应用（SPA）。导航守卫是 Vue Router 中一种非常有用的机制，用来在路由发生变化前后执行一些代码。这些守卫可以全局或局部地定义，也可以在导航的不同阶段定义。

### 全局守卫
全局守卫主要有三种：
1. `beforeEach`：在路由改变之前进行守卫，这是最常见的全局守卫。
2. `beforeResolve`：在 `beforeRouteEnter` 和 `beforeRouteUpdate` 守卫被调用后被调用。
3. `afterEach`：在路由改变之后进行守卫，不会接受 next 函数，不能改变导航本身。

使用示例：

router.beforeEach((to, from, next) => {
  // ...
  next();
});

router.afterEach((to, from) => {
  // ...
});

### 路由独享守卫
在路由配置中直接定义 `beforeEnter` 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
        next();
      }
    }
  ]
});

### 组件内守卫
组件内守卫是在路由组件内直接定义的，主要有：
1. `beforeRouteEnter`：在渲染该组件的对应路由被 confirm 前调用。
2. `beforeRouteUpdate`：在当前路由改变，但是该组件被复用时调用。
3. `beforeRouteLeave`：导航离开该组件的对应路由时调用。

使用示例：

export default {
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  },
  beforeRouteUpdate (to, from, next) {
    // ...
    next();
  },
  beforeRouteLeave (to, from, next) {
    // ...
    next();
  }
}

### 完整的导航解析流程
1. 导航被触发。
2. 在失活的组件里调用 `beforeRouteLeave` 守卫。
3. 调用全局的 `beforeEach` 守卫。
4. 在重用的组件里调用 `beforeRouteUpdate` 守卫 (2.2+)。
5. 在路由配置里调用 `beforeEnter`。
6. 解析异步路由组件。
7. 在被激活的组件里调用 `beforeRouteEnter`。
8. 调用全局的 `beforeResolve` 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 `afterEach` 钩子。
11. 触发 DOM 更新。
12. 调用 `beforeRouteEnter` 守卫中传给 `next` 的回调函数，创建好的组件实例会作为回调函数的参数传入。