vue3 嵌套路由 params传值

主页App.vue

<!-- html -->
<template>
    <div class="app">
        <!-- 标题 -->
        <Header/>
        <!-- 导航区 -->
        <div class="navigate">
            <RouterLink :to="{name:'zhuye'}" active-class="active">首页</RouterLink>
            <RouterLink :to="{path:'/news'}" active-class="active">新闻</RouterLink>
            <RouterLink :to="{path:'/about'}" active-class="active">关于</RouterLink>
        </div>
        <!-- 展示区 -->
        <div class="main-content">
            <RouterView></RouterView>
        </div>
    </div>
</template>


<script lang="ts" name="APP" setup>
import { RouterView,RouterLink } from 'vue-router';
import Header from './components/Header.vue';
</script>

路由配置index.ts

// 创建一个路由器，并暴露出去

// 引入路由器
import { createRouter,createWebHistory } from "vue-router";

// 引入组件
import Home from "../pages/Home.vue";
import News from "../pages/News.vue";
import About from "../pages/About.vue";
import Detail from "../pages/Detail.vue";

// 创建路由器
const router = createRouter({
    history:createWebHistory(), // 路由器工作模式
    routes:[//路由匹配规则（路径对组件）
        {
            name:'zhuye',
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[{
                name:'xiang',
                path:"detail/:id/:title/:content",
                component:Detail
            }]
        },
        {
            path:'/about',
            component:About
        },
    ]
})

export default router

新闻页News.vue

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="item in newList" :key="item.id">
        <!-- params 传值 -->

        <!-- 写法一 -->
        <!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> -->
        <!-- 写法二 -->
        <RouterLink 
        :to="{
          name:'xiang',
          params:{
            id:item.id,
            title:item.title,
            content:item.content
          }
          }">
          {{ item.title }}
        </RouterLink>
      </li>
    </ul>

    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts" name="News">
import { reactive } from 'vue';
let newList = reactive([
  {
    id:'news01',title:'好消息！好消息！',content:'快要发钱了'
  },
  {
    id:'news02',title:'如何一夜暴富',content:'跟我学IT'
  },
  {
    id:'news03',title:'震惊！万万没想到',content:'明天周一'
  },
  {
    id:'news04',title:'震惊！干了188天',content:'青海持续干旱，188天不下雨了'
  },
])

</script>

新闻详情页Detail.vue

<template>
  <ul class="news-list">
    <li>编号：{{ params.id }}</li>
    <li>标题：{{ params.title }}</li>
    <li>内容：{{ params.content }}</li>
  </ul>    
</template>

<script lang="ts" setup name="Detail">
import { useRoute } from 'vue-router';
import { toRefs } from 'vue';
// 使用路由hooks
let route = useRoute()

let {params} = toRefs(route)
console.log(params)
</script>