目录

vue2 组件内路由守卫使用

1、beforeRouteEnter 进入页面

to -- 即将要跳转到的页面

form -- 跳转前的页面,从哪个页面跳转过来的

next -- 下一步,若无指定跳转的路由,设置为空 next() 即可

复制代码
beforeRouteEnter(to, from, next) {
    next()
},

使用 beforeRouteEnter 时,组件还没有创建,因此无法使用 this,当我们需要写逻辑的时候可以在 next() 里面写,具体如下:

复制代码
beforeRouteEnter(to, from, next) {
  next(vm => {
    if (from.path === '/details') {
      vm.getData('1');
    } else {
      vm.getData();
    }
  })
}

2、beforeRouteLeave 离开页面

使用方法和 beforeRouteEnter 一样,同样有 to,from,next

复制代码
beforeRouteLeave(to, from, next) {
    next()
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
渔樵江渚上2 分钟前
深入理解 ArrayBuffer、TypedArray 和 DataView
前端·javascript·面试
Cutey9162 分钟前
v-model双向绑定原理解析
前端·javascript·vue.js
小华同学ai3 分钟前
需要的效果它都有,让AI对话开发效率翻倍!这款Ant Design扩展组件库绝了
前端·后端·github
myyyl3 分钟前
如何使用for of 遍历普通对象?
前端·javascript·面试
梓航4 分钟前
大模型实现工具调用的方式
前端
原生高钙4 分钟前
硬核!!!手把手带你实现埋点上报
前端
shibin4 分钟前
搭建 next 项目
前端
简言8564 分钟前
前端性能优化指南
前端
_Cheese5 分钟前
学术论文pdf图片中的公式如何自动识别为word
前端
四木呀6 分钟前
Nuxt3 实现接口域名动态化
前端·nuxt.js