首页获取vue3路由传参

获取vue3路由传参

时间: 2025-02-19 21:33:03 浏览: 39

### Vue 3 中的路由传参方法 #### 使用 `params` 进行传参在 Vue 3 中，通过 `params` 方式传递参数时，推荐使用对象形式进行传参，并且必须指定命名路由。这种方式不仅提高了代码的可读性，还能够有效避免 URL 解析错误[^4]。 ```html  <RouterLink :to="{ name: 'user', params: { userId: 123 }}">User</RouterLink> ``` 接收方可以通过调用 `useRoute()` 函数并访问返回的对象中的 `params` 属性来获取这些参数： ```javascript import { useRoute } from 'vue-router' export default { setup() { const route = useRoute() console.log(route.params.userId) // 输出：123 return {} } } ``` #### 动态路由匹配对于动态路径参数，在定义路由规则的时候可以在路径中加入冒号前缀(`:`)，这允许路由器识别这部分作为变量处理。之后便能像上面那样利用 `params` 来接受它们[^1]。 ```javascript const routes = [ { path: '/user/:id', component: User, children: [ // 更多子路由... ] }, ]; ``` #### 查询参数 (query) 除了 `params` 外，还可以采用查询字符串的形式来进行简单的键值对传输。这种情况下不需要特别设置路由名称或模式，只需要正常构建带有问号和键值对的链接即可[^3]。 ```html  <a href="/search?term=hello">Search Hello</a>  console.log(route.query.term); // "hello" ```

阅读全文