2020-06-17 Vue导航守卫（Vue Router的钩子函数）

学习导航守卫就是学习vue router的几个钩子函数。
老生常谈，vue router的钩子函数分为三类：
1.全局钩子： beforeEach 和 afterEach

const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  console.log(from);
  console.log(to);
  next();
});
//不执行next函数是不会执行下一个钩子，可以简单理解为会卡在进入路由的过程中

router.afterEach((to, from) => {
  console.log(from);
  console.log(to);
});
//afterEach不需要next

2.单个路由里面的钩子： beforeEnter beforeLeave

 {
        path: "/account",
        name: "Account",
        component: () => import("@/components/Account.vue"),
        beforeEnter: (to, from, next) => {
          console.log(to);
          next();
        },
        beforeLeave: (to, from, next) => {
          console.log(to);
          next();
        },
      },

3.组件路由：beforeRouteEnter beforeRouteUpdate beforeRouteLeave

export default {
  beforeRouteEnter(to, from, next) {
    console.log(to);
    next();
  },
  data: function() {
    return {},
   }
 },

需要注意的是beforeRouteEnter是无法获取到实例的，因为还未创建

---

用的比较多的是 beforeEach ，使用场景：前端进行登录判断

router.beforeEach((to, from, next) => {
     //我在这里模仿了一个获取用户信息的方法
     let isLogin = window.sessionStorage.getItem('userInfo');
     if (isLogin) {
         //如果用户信息存在则往下执行。
        next()
     } else {
         //如果用户token不存在则跳转到login页面
         if (to.path === '/login') {
             next()
         } else {
             next('/login')
         }
     } 
 })

---

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
使用场景：router.beforeResolve根据不同页面定义不同$http
在 main.js 里：

router.beforeResolve((to, from, next) => {
  let url;
  if (
    to.matched[0].name == "broker-shop" ||
    to.matched[0].name == "information"
  ) {
    url = "https://ddd.zhaoshang800.com";
  } else if (to.matched[0].name == "brokerage-list") {
    url = "https://aaa.zhaoshang800.com";
  } else if (to.matched[0].name == "sellhot") {
    url = "https://bbb.zhaoshang800.com";
  } else if (to.matched[0].name == "enterprise-index") {
    url = "http://ccc.zhaoshang800.com";
  } else {
    url = "https://" + location.host;
  }
  Vue.prototype.$http.defaults.baseURL = url;
  next();
});
 
————————————————
版权声明：本文为CSDN博主「caoyan0829」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/caoyan0829/article/details/104003623

---

参考：Vue.js 导航守卫
唯美(vmei) 5分钟学会vue中的路由守卫(导航守卫)