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()
}
相关推荐
百思可瑞教育25 分钟前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li35748 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj8 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel9 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel9 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky9 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵10 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld10 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记10 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5