vue3 监听路由参数

方法一

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

const route = useRoute();
const id = ref<string>();

watch(
    () => route.query,
    (val: any) => {
      id.value = val.id;
    },
);

方法二

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

const router = useRouter();

const id = ref<string>();

watch(
  () => unref(router.currentRoute).query,
  (val: string) => {
    id.value = val;
  },
);

方法三

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

const route = useRoute();

const id = computed(()=>route.query?.id)