vue3watch监听路由参数

在Vue 3中，`watch`函数可以用来监听响应式数据的变化，并执行相应的回调函数。如果你想要监听路由参数的变化，可以结合Vue Router和Vue 3的响应式系统来实现。以下是使用`watch`监听路由参数的一个例子：

首先，确保你已经正确安装并使用了Vue Router，并且已经定义了相应的路由和路由参数。然后，你可以使用Vue 3的`reactive`或`ref`来创建一个响应式的引用，从而让`watch`能够检测到变化。

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

export default {
  setup() {
    const route = useRoute();
    const routeParams = ref(route.params);

    // 监听路由参数的变化
    watch(() => route.params, (newVal, oldVal) => {
      // 这里可以根据新的路由参数执行相应的逻辑
      console.log('路由参数变化了', newVal);
    });

    // 如果需要在组件销毁时取消监听，可以保存watch的返回值，并在onMounted中调用
    // const unwatch = watch(...);

    // onUnmounted(() => {
    //   unwatch();
    // });

    return {
      routeParams,
    };
  },
};

在上面的代码中，我们首先通过`useRoute`获取当前路由对象，然后使用`ref`来创建一个响应式的引用`routeParams`，这个引用将跟踪`route.params`的变化。接着，我们使用`watch`函数来监听`routeParams`的值。每当路由参数发生变化时，`watch`的回调函数就会被触发。