当前位置：首页 > news >正文

vue如何在组件中监听路由参数的变化

news 2025/7/14 9:06:33

使用 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.namethis.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.namethis.user.age = to.query.ageconsole.log('调用了beforeRouteUpdate')// 确保调用 next() 方法，否则路由不会更新next()}
}
</script>