Vue 3 中如何在组合式 API（Composition API）中监听路由参数的变化？

Vue 3 中如何在组合式 API（Composition API）中监听路由参数的变化？

回答：
在 Vue 3 的组合式 API 中，可以使用 watch 函数配合 useRoute 来监听路由参数的变化。具体做法是从 vue-router 中导入 useRoute，获取当前路由对象，然后使用 watch 监听 route 对象的特定属性（如 params 或 query）。

示例代码：

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    // 监听路由参数变化（例如 /user/:id 中的 id）
    watch(
      () => route.params.id,
      (newId, oldId) => {
        console.log('ID changed from', oldId, 'to', newId);
        // 在这里执行数据获取等逻辑
      }
    );

    // 如果需要监听整个 params 对象（多个参数）
    watch(
      () => ({ ...route.params }),
      (newParams) => {
        console.log('Params changed:', newParams);
      }
    );
  }
};

解析：

• useRoute() 返回的是一个响应式的路由对象，但其内部属性（如 params、query）本身不是响应式的引用，因此不能直接 watch(route.params)，而应使用 getter 函数 () => route.params.xxx 或解构为新对象 () => ({ ...route.params }) 来触发响应式追踪。
• 这种方式适用于在同一个组件内切换不同路由参数（如从 /user/1 切换到 /user/2）时重新获取数据或更新状态。
• 注意：如果使用的是 <script setup> 语法糖，逻辑相同，只需在顶层使用 watch 和 useRoute 即可。

这种方式替代了 Vue 2 中的 $route watch 或 beforeRouteUpdate 导航守卫，更符合组合式 API 的响应式编程模型。