您现在的位置是:首页>学习分享
vue之路由钩子函数 2019-09-17 364
vue路由钩子函数可以大致分为三类,他们的作用都是主要对路由的跳转进行控制,例如权限管理、登录判断、浏览器判断。
1.全局钩子

主要包括beforeEach和afterEach,

一般有三个参数:

  • to:router即将进入的路由对象

  • from:当前导航即将离开的路由

  • next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。

通过beforeEach来对路由跳转做权限管理:

// 设置路由
router.beforeEach((tofromnext=> {
  console.log(tofrom)
  // 跳转前判断是否需要登录
  if (to.meta.auto) {
    sessionStorage.setItem('success'to.path)
    if (store.getters['login/getLogin']) {
      next()
    } else {
      next({ path: 'pleaseLogin' })
    }
  } else {
    next()
  }
})

router.beforeEach 页面加载之前

router.afterEach  页面加载之后

2、单个路由里面的钩子

beforeEnter和beforeLeave

beforeEnter: (tofromnext=> {          
   console.log(to,from,next)
},
beforeLeave: (tofromnext=> {
   console.log(to,from,next)
},
3、组件路由

beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave

beforeRouteEnter(tofromnext) {
   console.log(to)
},
beforeRouteUpdate(tofromnext) {
   console.log(to)
},
beforeRouteLeave(tofromnext) {
   console.log(to)
}
文章评论
关注我们
  • 微信公众号
  • 我的微信

站点声明:

1、本网站文章部分出自互联网,如无意中侵犯了某个媒体或个人的知识产权,请来信(987354940@qq.com)告之,本网站将立即删除。

Copyright © www.zhangqingblog.com All Rights Reserved. 备案号:鄂ICP备18005731号-2