目录

前言

一、路由守卫是什么？

二、路由守卫全解析

先来看一下钩子函数执行后输出的顺序吧

1.全局路由守卫

2.组件路由守卫

3.路由独享守卫

 单独介绍一下路由守卫钩子三个参数

前言

最近在学习vue路由守卫，感觉路由守卫这里知识点挺多的，来做个小笔记。

一、路由守卫是什么？

路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

二、路由守卫全解析

先来看一下钩子函数执行后输出的顺序吧

导航守卫分为：全局的、单个路由独享的、组件内的三种。分别来看一下：

1.全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫 ，钩子函数按执行顺序包括beforeEach、beforeResolve、afterEach三个。

router.beforeEach((to, from, next) => {
  console.log(to) => // 到哪个页面去？
  console.log(from) => // 从哪个页面来？
  next() => // 一个回调函数
}
router.afterEach（to，from） = {}

 [beforeEach]：在路由跳转前触发，参数包括to,from,next（参数会单独介绍）3个，这个钩子作用主要是用于登录验证，就是路由还没跳转前告知，跳转后再通知就晚了。

[beforeResolve]：在组件被解析后，这个钩子函数和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个。

[afterEach]：和beforeEach相反，它是在路由跳转完成后触发，参数包括to,from没有next,它发生在beforeEach和beforeResolve之后，beforeRouteEnter之前。

2.组件路由守卫

组件路由守卫就是在组件内执行的钩子函数，类似于组件内的生命周期钩子函数按执行顺序为beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个。

beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

[beforeRouteEnter]：路由进入之前调用，参数包括to，from，next。该钩子函数在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用。

[beforeRouteUpdate] ：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。当前路由query变更时，该守卫会被调用

[beforeRouteLeave]：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

3.路由独享守卫

目前它只有一个钩子函数beforeEnter

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: 'Home',
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

[beforeEnter]：和beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next

 单独介绍一下路由守卫钩子三个参数

to：目标路由对象；

from：即将要离开的路由对象；

next：它是最重要的一个参数，调用该方法后，才能进入下一个钩子函数。

        next()//直接进to 所指路由
        next(false) //中断当前路由
        next('route') //跳转指定路由
        next('error') //跳转错误路由

界面中可以通过三种方式植入路由：全局, 单个路由独享, 组件级。

• 全局前置守卫：首先需要注册全局路由

import router from "./router";
router.beforeEach((to, from, next) => {
  // ...
});
new Vue({
  el: "#app",
  store,
  router,
  components: { App },
  template: "<App/>"
});

应用场景：栗子，验证用户登录过期

router.beforeEach((to, from, next) => {
  if (to.matched.some(m => m.meta.auth)) {
    // 对路由进行验证
    if (isLogin("isLogin") === "1") {
      // 根据后台返回值判断是否登录过期
      // 已经登陆
      next(); // 正常跳转页面
    } else {
      // 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
      next({ path: "/", query: {} });
    }
  } else {
    next();
  }
});

• 路由独享的守卫：在路由配置上使用

routes: [
  {
    path: "/foo",
    component: Foo,
    beforeEnter: (to, from, next) => {
      // ...
    }
  }
];

• 组件内的守卫：直接在组件内像生命周期一样使用
  Vue 判断路由变化也可以使用组件内的守卫 beforeRouteLeave。beforeRouteLeave 接收三个参数：to(即将要跳转到的地址)、from(当前地址)、next（回调），中文释义就是“从哪里去哪里”。例如从/A跳转到/B，to 就是/Bfrom 就是/A。

栗子：在用户离开当前界面时询问

  beforeRouteLeave(to, from, next) {
    let pathName = this.$route.path.match(/\w+/)[0]
    if (from.name === pathName) {  // 如果是需要加判断的界面
      this.$createDialog({
        type: 'confirm',
        content: '是否离开当前界面？',
        confirmBtn: {
          text: '确定',
          active: true,
        },
        cancelBtn: {
          text: '取消',
          active: false,
        },
        onConfirm: () => {
          next()   // 点击确定之后才会继续跳转
        },
        onCancel: () => {
          next(false)    // next false终止跳转
        },
      }).show()
    } else {
      next()
    }
  },

适用场景：有编辑操作的界面。可以配合本地存储（比如 localStorage）获得更好的体验效果。判断用户有操作界面离开的动作时，将用户已经编辑的内容存储在本地，当用户再次访问界面先判断这个界面下有没有存储内容，有则根据需要将内容恢复。

栗子：以下为伪代码，仅提供思路

//监听用户编辑时缓存数据
this.$watch(
    () => this.datas,
    () => {
    this.isChanged = true
    ...
        // 处理  localStorage()
        //保存数据的方法
    ...
    },
    {
    deep: true,
    },
)

判断数据是否有变化后，在离开界面的时候询问

 beforeRouteLeave(to, from, next) {
    // 页面离开时，询问是否保存编辑数据
    pageUtils.pageLeave(() => this.isChanged, this.getCacheKey(), next)   // getCacheKey存储数据的key方法
  },

function pageLeave(callback, key, next) {
  // 判断页面数据是否有变化
  if (callback()) {
    Dialog.$create({   // UI模态框
      type: "confirm",
      content: "您填写的内容尚未保存，请确认是否离开？",
      confirmBtn: {
        text: "暂存并离开",
        active: true
      },
      cancelBtn: {
        text: "直接离开",
        active: false
      },
      onConfirm: () => {
        next();
      },
      onCancel: () => {
        // 移除缓存数据
        removeCache(key); // 存储数据的key

        next();
      }
    }).show();
  } else {
    next();
  }
}

vue路由钩子函数：

路由的钩子函数总结有6个

全局的路由钩子函数：beforeEach、afterEach

vue router.afterEach（全局后置守卫）
router.beforeEach 是页面加载之前，router.afterEach是页面加载之后

单个的路由配置内使用的钩子函数：beforeEnter

组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate

所有钩子函数参数都为 (to,from,next)

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性

from: (Route路由对象) 当前导航正要离开的路由

next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {
        //判断该路由是否需要登录权限
        if (token) {
            //通过读取token，如果存在，name接下一步如果不存在，那跳转回登录页
            next()//不要在next里面加"path:/",会陷入死循环
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}//将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next()
    }
})

路由独享的守卫(路由内部钩子)

在路由上直接配置 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo, // 这儿你可以使用路由懒加载引入
      beforeEnter: (to, from, next) => {
        // 
      }
    }
  ]

组件内的守卫(组件独享钩子)

1、beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不能！获取组件实例 this
  // 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  // 当转一个同一个页面中，当页面地址栏的参数发生变化时候，而数据并没有实时的进行更新，需要刷新页面才会显示新的数据，可通过to获取到路由的参数
  // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 this
}