前言
在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中（除非你显式地想要它们出现）；但缺点是需要对路由规则进行特殊配置。
