使用 watch
监听 $route
对象 的变化,从而捕捉路由参数的变化
beforeRouteUpdate 导航守卫 当前组件路由更新时调用
beforeRouteUpdate
钩子只在组件被复用时调用,即当组件实例仍然存在时。如果组件是完全重新创建的,那么应该使用 beforeRouteEnter
钩子。
<template>
<div>
<h1>用户信息</h1>
<p>用户名: {{ user.name }}</p>
<p>用户年龄: {{ user.age }}</p>
<button @click="edit('zhangsan',10)">编辑1</button>
<button @click="edit('wangwu',20)">编辑2</button>
</div>
</template>
<script>
export default {
data () {
return {
user: {}
}
},
watch: {
// 监听$route 对象,当路由变化时触发
'$route' (to, from) {
// 调用 beforeRouteUpdate 钩子
this.fetchData()
}
},
methods: {
fetchData () {
this.user = { name: 'lisi', age: 29 }
this.user.name = this.$route.query.name
this.user.age = this.$route.query.age
},
edit (name, age) {
this.$router.push({
path: '/',
query: {
name,
age
}
})
}
},
beforeRouteUpdate (to, from, next) {
// 这里可以执行一些逻辑,比如重新获取数据
this.user.nage = to.query.name
this.user.age = to.query.age
console.log('调用了beforeRouteUpdate')
// 确保调用 next() 方法,否则路由不会更新
next()
}
}
</script>