Vue 学习随笔系列五 -- 路由守卫 beforeRouteEnter 的使用
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
beforeRouteEnter 的使用
1、beforeRouteEnter 基本使用
to – 即将要跳转到的页面
form – 跳转前的页面
next – 下一步,若无指定跳转的路由,设置为空 next() 即可
beforeRouteEnter(to, from, next) {
console.log("to===", to)
console.log("from ===", from)
console.log("next ===", next)
next()
},
2、注意
beforeRouteEnter 函数内部不能使用 this,这是因为在执行路由钩子函数beforRouteEnter时候,组件还没有被创建出来;先执行beforRouteEnter,再执行组件周期钩子函数beforeCreate,可以将要处理的对象放在 next 中处理,例如:
data(){
return{
name: ''
}
}
beforeRouteEnter(to, from, next) {
console.log("to===", to.name)
console.log("from.name ===", from.name)
console.log("from ===", from)
next( vm => {
if(from.name === 'xxx') {
// 处理语句,可以是 data 中的数据,也可以是 methods中的函数。vm 相当于 this
vm.name = 'xxx'
vm.alarm()
}
})
},
methods: {
alarm(){
alert('123')
}
}




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:20 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)