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

使用 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>