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
      }
    })
  }
});
  1. 单个路由里面的钩子
    主要用于写某个指定路由跳转时需要执行的逻辑
  {
        path: '/dashboard',
        component: resolve => require(['../components/page/Dashboard.vue'], resolve),
        meta: { title: '系统首页' },
        beforeEnter: (to, from, next) => {
          },
        beforeLeave: (to, from, next) => {  
        }
    },
  1. 组件内的钩子 (用到的不多)
    主要包括 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')
        }
      }
    })
  }
Logo

前往低代码交流专区

更多推荐