vue3怎么获取路由参数

在 vue.js 3 中，有两种方法可获取路由参数：使用 $route 对象或 useroute() 钩子。$route 是一个只读对象，包含路由信息，包括参数，而 useroute() 返回 $route 对象的响应式副本，允许修改参数。

如何获取 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 路由参数。