Vue几种监听路由变化的方式
Vue几种监听路由变化的方式2.通过钩子函数 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
·
1.通过watch
1.1.返回 “从哪里来” 和 “哪里去” 的路由信息
watch:{
$route(to,from){
console.log(from.path) // 从哪来
console.log(to.path) // 到哪去
}
}
1.2. 返回 “新” “老” 路由信息
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
2.通过钩子函数 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
// 监听,当路由发生变化的时候执行
beforeRouteEnter (to, from, next) {
// 需要注意这里不能使用this,
// 因为我们使用的是进入路由之前,那会组件还没创建,
next(()=>{
// 所有我们只能使用过vm异步语句来让节点上树;
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
更多推荐
已为社区贡献8条内容
所有评论(0)