vue导航守卫以及扩展和区别

路由的导航守卫 又叫做路由的钩子函数（生命周期函数）

就是在跳转页面的 时候把 路由拦下来 做一些操作 再放行

一共有三种

第一种是全局守卫

beforeEach 路由进入之前

beforeResolve 路由解析之前

afterEach 路由进入之后

全局守卫 beforeEach 和 beforeResolve  

他们两个都会在路由跳转前就执行 参数都是 to from next

他们两个的区别 执行的时机不一样 beforeEach 是在路由规则被循环之前执行

beforResolve 是在组件被解析之后调用 beforeEach 要比 beforResolve 先执行

第二种 组件内守卫

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

第三种

独享守卫

beforeEnter 路由进入之前

有三个参数

to from next

next 这个参数 在路由 3.x 版本的时候 是必须的

但是到了路由 4.x 版本的时候 next 参数变成可选的了

一般来说 vue2 搭配 3.x 的路由

vue3 搭配 4.x 的路由

比如说 购物车页面只有登陆的才能访问 我们可以用组件级守卫守卫购物车页面

如果已经登陆存的有 token 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面

```js

  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();

    } else {
      next("/login");

    }

```

next 参数 除了括号里可以是空和路径之外 还可以是一个回调函数（回调函数就是一个被作为参数传递的函数）

比如说 token 被存进 vuex 里就能这么写：

```js 

beforeRouteEnter(to, from, next) {

    // if (localStorage.getItem("token")) {

    //   next();

    // } else {

    //   next("/login");

    // }

    next((vm) => {

      // vm就是 这个组件实例 就是this

      if (vm.$store.state.token) {

        next();

      } else {

        next("/login");

      }

    });

  },

```

三种守卫全局 组件 独享守卫的区别

1. 作用范围不同 全局作用于所有页面 组件作用于单个组件 独享也是守卫单个页面

2. 代码写的位置不一样 全局守卫写在 router/index.js 中 组件守卫写在组件里 跟 data 同级 独享守卫写在路由规则里

3. 执行顺序有区别 执行的顺序要记下来

   beforeEach 前置守卫

   beforeEnter 独享守卫

   beforeRouteEnter 组件守卫

   beforeResolve 解析守卫

   afterEach 路由后置守卫