vue3怎么获取路由参数

如何获取 Vue.js 3 路由参数

在 Vue.js 3 中获取路由参数非常简单。有两种主要方法：

1. 使用 $route 对象

$route 是一个只读对象，它包含有关当前路由的各种信息，包括其参数。要访问路由参数，请使用以下语法：

立即学习“前端免费学习笔记（深入）”；

const { id } = this.$route.params

其中 id 是路由参数的名称。

2. 使用 useRoute() 钩子

useRoute() 钩子返回 $route 对象的响应式副本。这允许您在组件中获取和修改路由参数：

import { useRoute } from 'vue-router'const { id } = useRoute()

示例

例如，假设您有一个路由 "/user/:id"。要获取 id 参数，您可以执行以下操作：

// 使用 $route 对象const { id } = this.$route.params// 使用 useRoute() 钩子import { useRoute } from 'vue-router'const { id } = useRoute().params

无论使用哪种方法，您都可以轻松地获取 Vue.js 3 路由参数。