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()
}
相关推荐
binqian1 分钟前
【异步】js中异步的实现方式 async await /Promise / Generator
开发语言·前端·javascript
Jerry说前后端10 分钟前
Android 移动端 UI 设计:前端常用设计原则总结
android·前端·ui
熊猫钓鱼16 分钟前
基于Trae CN与TrendsHub快速实现的热点百事通
前端·trae
LIUENG23 分钟前
Vue3 响应式原理
前端·vue.js
讨厌吃蛋黄酥26 分钟前
前端居中九种方式血泪史:面试官最爱问的送命题,我一次性整明白!
前端·css
龙在天30 分钟前
🤩 用Babel自动埋点,原来这么简单!
前端
Hierifer30 分钟前
跨端实现之网络库拦截
前端
随笔记32 分钟前
react-router里的两种路由方式有什么不同
前端·react.js
前端李二牛32 分钟前
异步任务并发控制
前端·javascript
你也向往长安城吗1 小时前
推荐一个三维导航库:three-pathfinding-3d
javascript·算法