vue3获取路由参数

// 在 Vue 3 中获取路由参数主要依赖于 Vue Router。下面是一个简单的示例代码，展示如何在组件中获取路由参数。

<template>
  <div>
    <p>从路由中获取的参数 id: {{ id }}</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    // 创建一个响应式的变量来存储路由参数
    const id = ref(null);

    // 使用 useRoute 钩子获取当前路由信息
    const route = useRoute();

    // 当组件挂载时，从路由对象中获取参数并赋值给 id
    onMounted(() => {
      id.value = route.params.id;
    });

    return {
      id,
    };
  },
};
</script>

<!-- 解释说明：
1. `useRoute` 是 Vue Router 提供的一个组合式 API，用于获取当前的路由信息。
2. `route.params.id` 用于访问 URL 中定义的动态参数，例如在路径 `/user/:id` 中，`:id` 就是动态参数。
3. `onMounted` 是 Vue 3 的生命周期钩子，在组件挂载后执行，确保我们在正确的时间点获取路由参数。
4. `ref` 用于创建一个响应式的变量，当其值发生变化时，视图会自动更新。 -->