vue3 setup语法糖 监听动态路由的变化

Vue 3 的 `setup` 语法糖可以用于在组件中编写逻辑代码。要监听动态路由的变化，你可以使用 `watch` 函数来实现。下面是一个示例：

import { watch, ref } from 'vue';

export default {
  setup() {
    const routeParams = ref(null);

    watch(
      () => $route.params, // 监听 $route.params 对象
      (newParams) => {
        // 在路由参数变化时执行的逻辑
        // 可以在这里更新组件的状态或执行其他操作
        routeParams.value = newParams;
      }
    );

    return {
      routeParams
    };
  }
}

在上面的示例中，我们使用了 `watch` 函数来监听 `$route.params` 对象，它包含了动态路由的参数。当路由参数发生变化时，`watch` 会调用传入的回调函数，我们可以在这个回调函数中执行相应的逻辑操作。在这个例子中，我们将新的路由参数赋值给 `routeParams` 变量。

请确保在组件中正确引入 Vue 3 的相关模块（如 `watch` 和 `ref`），并且 `$route` 对象可以通过 `this.$route` 或 `this.$router.currentRoute` 来获取。