首先，什么是路由守卫呢？

其实可以拆分理解：路由---因为Vue是属于单页面的（SPA），要实现多页面的跳转，就需要在根组件App.vue中使用<router-view/>占位符实现跳转；守卫---也是字面意思，即在路由跳转的时候进行一些判断验证，从而起到防守的作用（例如，加入购物车会判断是否登录等）

路由守卫的参数

to: 跳转的目标(要跳转到那个路由组件)；

from:要离开的路由（其实就是当前组件）；

next：下一步（这个必须要，除全局后置钩子除外）；

下面就是路由守卫的分类，参数可以对照下面代码理解

路由守卫的分类

1.全局守卫：通常写在vue项目包的router里，index.js文件中，这里的全局前置守卫实际项目中用的比较多，通常会在这里做一些判断

全局前置守卫-beforeEach

router.beforeEach((to, from, next) => {
  console.log('全局前置守卫');
  console.log(from);
  console.log(to);
  next();
})

全局后置钩子-afterEach

router.afterEach((to, from) => {
  console.log('全局后置钩子');
  console.log(from);
  console.log(to);
})

2.独享守卫-beforeEnter：写在router里index.js的routes单路由配置中，代表这个路由有一个单独的守卫，只对当前路由起作用

 {
    path: '/demo01',
    name: 'Demo01',
    component: Demo01,
    beforeEnter: (to, from, next) => {
      console.log('Demo01独享守卫');
      console.log(from);
      console.log(to);
      next();
    }
  }

3.组件内部守卫：写在组件内<script></script>中

组件内部守卫-进入：beforeRouteEnter；

这里也可以作为Vue的数据获取方式之一 ---导航完成之前获取，即在获取数据成功的回调方法中写next（）这种方法不需要在预期的页面展示loading等组件，可以在上一个页面的时候有一个加载的进度条提示，这样用户的体验可能会更好一点 (另一种数据获取方式就是常用的---导航完成之后获取，通常在组件的生命周期created或者mounted中作业)

 beforeRouteEnter(to, from, next) {
    console.log("Demo01组件内守卫-进入");
    console.log(from);
    console.log(to);
    next();
  }

组件内部守卫-离开：beforeRouteLeave

  beforeRouteLeave(to, from, next) {
    console.log("Demo01组件内守卫-离开");
    console.log(from);
    console.log(to);
    next();
  }

接下来我们一起来看下代码的效果：刚进入首页页面，两个全局首页打印出来了，因为我没写跳转路径，默认就是/Home

当我进入demo01组件时

可以看到整体的顺序是：

graph TD
全局前置守卫 --> 独享守卫--> 组件内守卫-进入--> 全局后置钩子

当我点击跳转其他页面时（这里其他组件页面就没写单独的路由守卫了）

可以看到执行的顺序是：

graph TD
组件内守卫-离开 --> 全局前置守卫--> 全局后置守卫

好啦，就分享到这里，不常用的朋友们可以收藏一波，感谢浏览！

3分钟带你了解Vue中路由守卫

首先，什么是路由守卫呢？

路由守卫的参数

路由守卫的分类