vue3侦听router

在Vue3中，可以使用`watch`函数来监听路由参数的变化。具体步骤如下：

1. 首先，在组件中引入`useRoute`函数和`watch`函数。

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

2. 在组件中使用`useRoute`函数获取当前路由对象。

const route = useRoute();

3. 使用`watch`函数监听路由参数的变化，并在回调函数中处理参数变化的逻辑。

watch(() => route.params, (params) => {
  // 处理参数变化的逻辑
});

下面是一个完整的例子：

<template>
  <div>
    <p>userId: {{ userId }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = ref<string | string[]>(route.params.id);

watch(() => route.params, (params) => {
  userId.value = params.id;
});
</script>