Vue前端篇——Vue 3 中的路由传参详解
原创
前言
在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中（除非你显式地想要它们出现）；但缺点是需要对路由规则进行特殊配置。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
