【1】RouterLink+query
父组件脚本如下:
<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>第一种写法，直接拼接路径
<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>在 Vue.js 中，反引号（``）通常用于模板字符串（Template literals）。模板字符串是 ES6 引入的一种新的字符串类型，允许将表达式嵌入到字符串中。在 JavaScript 中，你可以使用反引号来创建一个字符串，并在其中使用${}语法来插入变量或表达式的值。
子组件接收：
<template>
<ul class="news-list">
<li>编号：{{ query.id }}</li>
<li>标题：{{ query.title }}</li>
<li>内容：{{ query.content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
import {toRefs} from 'vue'
import {useRoute} from 'vue-router'
let route = useRoute()
//解构
let {query} = toRefs(route)
</script>第二种写法，对象
<ul>
<li v-for="news in newsList" :key="news.id">
<!-- 第二种写法 -->
<RouterLink
:to="{
name:'xiang',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>
</li>
</ul>【2】RouterLink+params
第一种写法，直接拼路径
<template>
<div class="news">
<!-- 导航区 -->
<ul>
<li v-for="news in newsList" :key="news.id">
<!-- 第一种写法 -->
<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>
</li>
</ul>
<!-- 展示区 -->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>路由配置需要进行占位：
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail/:id/:title/:content?',
component:Detail
}
]
},子组件接收：
<template>
<ul class="news-list">
<li>编号：{{ route.params.id }}</li>
<li>标题：{{ route.params.title }}</li>
<li>内容：{{ route.params.content }}</li>
</ul>
</template>
<script setup lang="ts" name="About">
import {useRoute} from 'vue-router'
const route = useRoute()
// 这里没有对route 进行解构得到params
</script>第二种写法，对象
<RouterLink
:to="{
name:'xiang',
params:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>相比params，个人推荐使用query，更为直接明了。
【3】路由的props配置
作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
// props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
return route.query
}
}修改params传参
路由组件修改：
{
name:'xinwen',
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'detail',
component:Detail,
props:true,
}
]
}detail组件修改：
<template>
<ul class="news-list">
<li>编号：{{id}}</li>
<li>标题：{{title}}</li>
<li>内容：{{content}}</li>
</ul>
</template>
<script setup lang="ts" name="About">
defineProps(['id','title','content'])
</script>修改query传参
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
return route.query
}
}detail组件修改：
<template>
<ul class="news-list">
<li>编号：{{id}}</li>
<li>标题：{{title}}</li>
<li>内容：{{content}}</li>
</ul>
</template>
<script setup lang="ts" name="About">
defineProps(['id','title','content'])
</script>
