Vue3中的路由传参两种方式举例详解
更新时间：2025年05月21日 09:19:44 作者：小二爱编程·
这篇文章主要给大家介绍了关于Vue3中的路由传参两种方式的相关资料,Vue Router支持query和params传参,文中通过代码介绍的非常详细,需要的朋友可以参考下
前言
在Vue应用中，路由传参是非常常见的需求，它允许我们在不同的组件之间传递数据。Vue Router提供了两种主要的方式来传递参数：query参数和params参数。下面我们将详细探讨这两种传参方式的使用方法和注意事项。
一、query参数
Query参数，顾名思义，是附加在URL后面的查询字符串，以?开头，后面跟着一系列的key=value对，多个键值对之间用&分隔。
1. 传递参数
在主路由中定义跳转的子路由，使用<router-link>组件可以方便地实现query参数的传递。有两种方式来指定to属性：字符串写法和对象写法。
- 字符串写法：直接在to属性中写入路径和查询字符串。
<template>
<div class="news">
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<!-- 第一种写法
路径拼接字符串
-->
<RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{news.title}}</RouterLink> -->
</li>
</ul>
<!-- 展示区
点击 路由跳转 内容展示到 路由展示区
-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from 'vue'
import {RouterView,RouterLink} from 'vue-router'
const newsList = reactive([
{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
{id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
{id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
{id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
])
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
/* list-style: none; */
padding-left: 10px;
}
.news li::marker {
color: #64967E;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style> - 对象写法：通过一个对象来指定路径和查询参数。对象的path属性指定路径，query属性则是一个包含所有查询参数的对象。
<template>
<div class="news">
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<!-- 第二种写法
指定路由名称
参数query列表
-->
<RouterLink
:to="{
name:'xiang',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>
</li>
</ul>
<!-- 展示区
点击 路由跳转 内容展示到 路由展示区
-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang="ts" name="News">
import {reactive} from 'vue'
import {RouterView,RouterLink} from 'vue-router'
const newsList = reactive([
{id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
{id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
{id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
{id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
])
</script>
<style scoped>
/* 新闻 */
.news {
padding: 0 20px;
display: flex;
justify-content: space-between;
height: 100%;
}
.news ul {
margin-top: 30px;
/* list-style: none; */
padding-left: 10px;
}
.news li::marker {
color: #64967E;
}
.news li>a {
font-size: 18px;
line-height: 40px;
text-decoration: none;
color: #64967E;
text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
width: 70%;
height: 90%;
border: 1px solid;
margin-top: 20px;
border-radius: 10px;
}
</style>2. 接收参数
在目标组件中，也就是上述定义的'xiang'路由组件，我们可以使用useRoute来获取传递过来的query参数。useRoute返回一个响应式的路由对象，其中的query属性包含了所有的查询参数。
<template>
<ul class="news-list">
<li>编号：{{ query.id }}</li>
<li>标题：{{ query.title }}</li>
<li>内容：{{ query.content }}</li>
</ul>
</template>
<script setup lang="ts" name="Detail">
import {toRefs} from 'vue'
import {useRoute} from 'vue-router'
// 接收跳转请求的query参数
let route = useRoute()
console.log(route.query)
let {query} = toRefs(route)
</script>运行结果如下，在控制台可以接收到路由请求参数。
二、params参数
Params参数是通过URL的路径部分来传递参数的，通常用于传递动态路由参数。
1. 传递参数
同样地，我们使用<router-link>组件来传递params参数。但需要注意的是，如果使用对象写法来指定to属性，我们必须使用路由的name配置项，而不能直接使用path。
- 字符串写法：直接在to属性中写入包含参数的路径。
<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>- 对象写法：通过一个对象来指定路由名称和参数。对象的name属性指定路由名称，params属性则是一个包含所有路径参数的对象。
<RouterLink
:to="{
name:'xiang', // 使用name配置项
params:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>2. 接收参数
在目标组件中，我们同样可以使用useRoute来获取传递过来的params参数。但这次我们需要访问的是route.params属性。
<template>
<ul class="news-list">
<!--获取路由param的参数-->
<li>编号：{{ route.params.id }}</li>
<li>标题：{{ route.params.title }}</li>
<li>内容：{{ route.params.content }}</li>
</ul>
</template>
<script setup lang="ts" name="Detail">
import {toRefs} from 'vue'
import {useRoute} from 'vue-router'
// 接收跳转请求的param参数
let route = useRoute()
console.log(route)
</script>需要注意的是，使用param获取路由参数，需要在路由定义的ts文件中，定义好参数，如：
{
name:'xinwen',
path:'/news',
component:News,
// 嵌套子路由
children:[
{
name:'xiang',
path:'detail/:id/:title/:content?',
component:Detail
}
]
}三、总结
- 当使用params参数时，如果采用对象写法来指定to属性，必须使用路由的name配置项，而不能直接使用path。这是因为params参数需要通过路由的名称来进行匹配，而不是简单地拼接路径。
- 在传递params参数之前，需要在路由规则中为对应的参数占位。例如，如果我们要传递一个名为
id的参数，那么路由规则应该包含一个:id的动态段。 - Query参数和params参数各有优缺点。Query参数简单易用，不需要对路由规则做特殊处理；但缺点是它们会出现在URL中，可能会影响用户体验和SEO。Params参数更加灵活和安全，不会出现在URL中（除非你显式地想要它们出现）；但缺点是需要对路由规则进行特殊配置。
到此这篇关于Vue3中的路由传参两种方式的文章就介绍到这了,更多相关Vue3路由传参详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
WebSocket是一种在客户端和服务器之间进行双向通信的网络协议,它通过建立持久性的、全双工的连接,允许服务器主动向客户端发送数据,本文小编给大家介绍了基于Vue3+WebSocket实现实时文件传输监控系统,需要的朋友可以参考下2025-03-03
这篇文章主要介绍了vue分页插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
driver.js 是一个轻量级、无依赖的原生JavaScript引擎，在整个页面中驱动用户的注意力，强大的、高度可定制的原生JavaScript引擎，无外部依赖，支持所有主流浏览器，这篇文章主要介绍了vue如何使用driver.js实现项目功能向导指引,需要的朋友可以参考下2023-03-03
下面小编就为大家分享一篇Vue的轮播图组件实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
今天小编就为大家分享一篇vue实现同一个页面可以有多个router-view的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue实现响应式布局的两种方法,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-12-12
这篇文章主要介绍了vue-antd form组件封装全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要为大家详细介绍了如何利用vue中的draggable插件实现多选拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了vue使用Element-UI部分组件适配移动端问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论