Vue 路由守卫及其在实际开发中的应用

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

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

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();
  }
}