关于vue路由的钩子函数,无论实际项目中还是面试中都是很重要的话题,下面根据自己实际项目中的了解简单介绍下vue路由的几个钩子函数以及在项目中的用处
- beforeEach
这个钩子函数一般用于全局级别的,对整个项目的路由跳转进行监控,可以根据路由配置文件中的meta中的配置来进行相应的逻辑判断,比如 是否需要登陆/是否需要权限/是否要做缓存/是否显示头部尾部/是否进入时刷新等等。。
router.beforeEach((to, from, next) => {
if (to.meta.isUseCache === undefined) {
to.meta.isUseCache = false//判断是否要做缓存
}
if (to.meta.needLogin === undefined) {
to.meta.needLogin = false
}
if (utils.isUplus()) {
to.meta.showTabbar = false
}
if (to.meta.needLogin && !Store.state.isLogin && !utils.isUplus()) {
<!--判断是否需要登录/是否要求app环境-->
}
// 获取分享者id 用于佣金结束
if (判断) {
<!--逻辑操作-->
}
//next() 正常跳转
//next(false) //取消了导航
next() //正常跳转,不写的话,不会跳转
}
函数带有三个参数,来源路由的实体,要去的路由的实体,以及next回调,代码最后必须写next回调否则不跳转
路由文件中的配置,meta中的字段可以自定义:
const route= [{
path: '/地址',
name: '名称',
component: () => import('路径'),
meta: {
keepAlive: false,
title: '购物车',
needLogin: true,
showTabbar: true,
showHeader: false,
}
}]
-
afterEach
afterEach的使用与 beforeEach一致,场景不同,可以进行一些当离开路由的操作逻辑 -
beforeEnte
这个函数是针对单个路由的配置,可以写在路由的配置文件中,针对单个路由做判断,用法如下:
const goods = [
{
path: '/url地址',
name: '路由名称',
component: () => import(
'组件地址'),
meta: {
keepAlive: false,
showHeader: false,
showTabbar: false,
title: '标题',
hasdownload: true,
},
beforeEnter: (to, from, next) => {
const id = to.query.id|| ''
if (utils.isSgRn()) {
<!--操作逻辑-->
next(false)
} else {
next()
}
}
}
]
- beforeRouteEnter
这个函数可以写在组件内部,与data/mounted/method方法同级,需要注意的是此函数执行顺序优先于vue的生命周期函数beforeCreate,此时vue实力还未创建,this不存在,也是三个参数,与前面的一致
beforeRouteEnter(to, from, next){
console.log(this) //此时打印this,返回的是undefine,因为vue实例尚未初始化
next((vm) => { //如果需要在vue实例创建后做一些操作可以写在next回调中
<!--这里的逻辑会在实例化vue对象后调用-->
})
}
- beforeRouteLeave
用法类似于beforeRouteEnter,根据业务场景选择使用哪个钩子函数