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()
}
相关推荐
掘金安东尼4 分钟前
Caddyfile:用最简单的方式配置最现代的 Web 服务器
运维·服务器·前端
菠萝+冰16 分钟前
React-Window 虚拟化滚动
前端·react.js·前端框架
皓月Code18 分钟前
第三章、React项目国际化介绍(`react-i18next`)
前端·javascript·react.js·1024程序员节
云中雾丽21 分钟前
react中 所有给 children 传值的方式
前端
加蓓努力我先飞23 分钟前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
豆苗学前端24 分钟前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一25 分钟前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎26525 分钟前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
有点笨的蛋27 分钟前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
文心快码BaiduComate34 分钟前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员