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()
}
相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python