vue3 获取路由参数

作者：花小泽ノ发布日期:2026-07-19 浏览:57

// 在 Vue 3 中获取路由参数的示例代码

// 首先确保你已经安装并配置了 Vue Router
// 然后在你的组件中使用以下代码来获取路由参数

<script setup>
import { useRoute } from 'vue-router';

// 创建一个 route 对象，用于访问当前路由信息
const route = useRoute();

// 获取路由参数，例如 /user/:id 中的 id 参数
const userId = route.params.id;

// 如果需要在组件挂载时获取参数，可以使用 onMounted 钩子
import { onMounted } from 'vue';

onMounted(() => {
  console.log('用户 ID:', userId);
});
</script>

<!-- 解释说明：
1. `useRoute` 是 Vue Router 提供的一个组合式 API，用于获取当前路由的信息。
2. `route.params` 包含了所有通过 URL 路径传递的参数。
3. `onMounted` 钩子确保在组件挂载后执行某些逻辑，例如日志记录或数据获取。 -->

上一篇：npm 安装vue

下一篇：vue项目创建