Vue 3 中如何使用 Composition API 在 setup 函数中监听路由参数的变化？

Vue 3 中如何使用 Composition API 在 setup 函数中监听路由参数的变化？

在 Vue 3 的 Composition API 中，可以通过 watch 函数配合 Vue Router 提供的 useRoute 来监听路由参数的变化。具体做法如下：

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

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

    // 监听路由参数变化
    watch(
      () => route.params.id, // 监听特定参数，例如 id
      (newId, oldId) => {
        console.log('路由参数 id 发生变化:', oldId, '->', newId);
        // 在这里执行依赖该参数的逻辑，比如重新获取数据
      }
    );

    // 如果需要监听整个 route 对象的变化（比如 query、hash 等）
    watch(
      () => ({ ...route.query, ...route.params }), // 创建一个响应式依赖
      (newRoute, oldRoute) => {
        console.log('路由发生变化:', oldRoute, '->', newRoute);
      }
    );
  }
};

解析：

• 在 Vue 3 中，setup 函数替代了 Options API 中的 data、methods 等选项。
• useRoute() 是 Vue Router 4 提供的组合式函数，返回当前路由的响应式对象。
• route.params 和 route.query 本身是响应式的，但直接 watch(route.params) 可能不会触发（因为对象引用未变），所以推荐监听具体的属性（如 route.params.id）或使用 getter 函数返回新对象以建立依赖。
• 若需监听多个参数或整个路由变化，可使用计算属性形式的 getter（如 () => ({ ...route.params })）来确保响应性。

这种方式比 Options API 中的 watch: { '$route' } 更灵活且类型友好，尤其适合 TypeScript 项目。