Vue-router

路由守卫，简单理解来说就是，当用户要进行一些操作时，我需要用户的一些信息或数据或行为，我判断过后，才会同意用户进行操作。

全局导航守卫

导航守卫主要用来监听路由的进入和离开，vue-router 提供了 beforeEach 和 afterEach 等钩子函数，它们会在路由即将改变前 及 改变后触发，以此来监听路由的变化。

beforeEach(全局前置守卫)

全局前置路由守卫，每次路由切换之前被调用，主要用来权限拦截操作。

router.beforeEach((to, from, next) => {
  if((to.path != '/login' || !to.meta.isAuth) && !checkToken() ) { // 需要登录的页面验证token不成功就需要跳到登录页面
    next('/login')
  } else {
    next(); // 如果是不需要登录的页面直接放行
  }
});

afterEach(全局后置守卫)

全局前置路由守卫，每次路由切换之后被调用，可用于切换document.title。

router.afterEach((to, from) => {
  if (to.path === '/home') {
    document.title = '首页';  //修改网页的title
  }
});

独享路由守卫

独享路由守卫只有前置没有后置

{
  path: '/qinghua',
  name: 'qinghua',
  component: Qinghua,
  beforeEnter: (to, from, next) => {
    if (localStorage.getItem('school') !== '清华大学') {
      alert('您无权限查看！');
    }
  }
}

组件内守卫

写在组件对象里。分别有前置守卫，后置守卫，路由改变守卫（当前组件被复用的情况,不是路径改变）三个钩子函数。独享路由守卫只有前置没有后置，直接写在.vue文件中。

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

// 进入守卫,通过路由规则,进入该组件时被调用
beforeRouteEnter(to, from, next) {
  // ...
  console.log("enter");
  next();
},
// 离开守卫,通过路由规则,该组件更新时被调用
beforeRouteUpdate(to, from, next) {
  // ...
  console.log("leave");
  next();
},
// 离开守卫,通过路由规则,该组件离开时被调用
beforeRouteLeave(to, from, next) {
  // ...
  console.log("leave");
  next();
},