面试题：Vue Router 如何响应路由参数的变化？

在 Vue Router 中，当路由参数发生变化时，组件默认不会重新渲染，因为 Vue 会复用相同的组件实例。为了响应路由参数的变化，可以通过以下方式来处理：

1. 监听 `$route` 对象

可以通过 watch 监听 $route 对象的变化，当路由参数变化时执行相应的操作。

export default {
  watch: {
    '$route'(to, from) {
      // 响应路由变化
      if (to.params.id !== from.params.id) {
        this.fetchData(to.params.id);
      }
    }
  },
  methods: {
    fetchData(id) {
      // 根据新的参数获取数据
    }
  }
}

2. 使用 `beforeRouteUpdate` 导航守卫

beforeRouteUpdate 是 Vue Router 提供的导航守卫，可以在组件内部使用它来响应路由参数的变化。

export default {
  beforeRouteUpdate(to, from, next) {
    // 响应路由变化
    if (to.params.id !== from.params.id) {
      this.fetchData(to.params.id);
    }
    next();
  },
  methods: {
    fetchData(id) {
      // 根据新的参数获取数据
    }
  }
}

3. 使用 `key` 强制重新渲染组件

通过给 router-view 或组件添加一个 key 属性，可以强制组件在路由参数变化时重新渲染。

<router-view :key="$route.fullPath"></router-view>

或者直接在组件上使用：

<MyComponent :key="$route.params.id" />

4. 在 `created` 或 `mounted` 钩子中处理

在 created 或 mounted 钩子中获取初始数据，并在 watch 中处理参数变化。

export default {
  created() {
    this.fetchData(this.$route.params.id);
  },
  watch: {
    '$route.params.id': function(newId) {
      this.fetchData(newId);
    }
  },
  methods: {
    fetchData(id) {
      // 根据新的参数获取数据
    }
  }
}