vue路由的钩子函数

vue路由的钩子函数

• vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。
• 路由钩子分为三类： 全局的、单个路由独享的、或者组件级的

1. 全局钩子： 主要包括beforeEach和aftrEach,这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作。一般写在main.js里面

   beforeEach函数有三个参数：
   - to:router即将进入的路由对象
   - from:当前导航即将离开的路由
   - next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
   可以使用router.beforeEach注册一个全局的 before 钩子
   router.beforeEach((to, from, next) => { // ... })

   after 钩子没有 next 方法，不能改变导航
   router.afterEach(route => { // ...})
   在项目中用到：

router.beforeEach((to, from, next) => {
  console.log('------', next)
  let title = 'LNG运营管理平台'
  if (to.meta.title) {
    window.document.title = to.meta.title + ' - ' + title   //url地址栏上显示的title
  } else {
    window.document.title = title  //如果没有显示默认的
  }
  if (to.name !== "login" && !cachehelper.getUserInfoCache()) {  //如果不是在登录页并且本地缓存被清除了则强制跳到登录页
    console.log('清空缓存')
    next({
      name: 'login',
      replace: true
    })
  } else if (!checkHasRoute(to.name)) {  //如果是route.js路由里面没有的页面地址，则显示404页面。
    next({
      name: '404',
      replace: true,
      query: {
        from: from.name
      }
    })
  } else if (!config.useAuth) {    //这个是判断权限的，如果没有开启权限验证就正常执行
    next()
  } else if (checkAuth(to.name)) {
    next()
    console.log('正常')
  } else {
    console.log('无权限')
    next({
      name: '401',
      replace: true,
      query: {
        from: from.name
      }
    })
  }
});

2. 单个路由里面的钩子
   主要用于写某个指定路由跳转时需要执行的逻辑

  {
        path: '/dashboard',
        component: resolve => require(['../components/page/Dashboard.vue'], resolve),
        meta: { title: '系统首页' },
        beforeEnter: (to, from, next) => {
          },
        beforeLeave: (to, from, next) => {  
        }
    },

3. 组件内的钩子 （用到的不多）
   主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

 beforeRouteEnter(to, from, next) {
    next(vm => {
      if (
        vm.$route.meta.hasOwnProperty('auth_key') &&
        vm.$route.meta.auth_key != ''
      ) {
        if (!vm.hasPermission(vm.$route.meta.auth_key)) {
          vm.$router.replace('/admin/noPermission')
        }
      }
    })
  }