16、嵌套路由、query参数、params参数

嵌套路由

子路由,配置路由规则，使用children配置项：

index.ts

import {createRouter,createWebHashHistory, createWebHistory} from 'vue-router'import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import Yule from '@/pages/Yule.vue'
import Detail from '@/pages/Detail.vue'
const router=createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/news',component:News,children:[{path:'detail',component:Detail},]},{path:'/yule',component:Yule}]
})export default router

query参数

News.vue

<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> --><!-- 第二种写法 --><RouterLink :to="{path:'/news/detail',query:{id:news.id,name:news.name,age:news.age}}">{{news.name}}</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:'1',name:'lisi',age:'19'},{id:'2',name:'张三',age:'18'},{id:'3',name:'王五',age:'28'}])</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>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>

接收参数：

<template><div><h1>id:{{ query.id }}</h1><br><h1>姓名:{{ query.name }}</h1><br><h1>年龄:{{ query.age }}</h1></div>
</template><script setup lang="ts" name="Detail">import {toRefs} from 'vue'import {useRoute} from 'vue-router'let route = useRoute()let {query} = toRefs(route)</script><style scoped></style>

params参数

<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink><!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink :to="{name:'xiang', //用name跳转params:{id:news.id,title:news.title,content:news.title}}"
>{{news.title}}
</RouterLink>

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。