[Vue3] 嵌套路由

App.vue

<template>
  <div class="app">
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home">Home</RouterLink>
      <RouterLink to="/news">News</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>

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

<style scoped>
/* 可以添加一些样式 */
</style>

router/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:[ // 一个一个的路由规则
        {
            path:'/home',
            component:Home
        },
        {
            path:'/news',
            component:News,
            children:[
                {
                    path:'detail', // 子集不用写/
                    component:Detail
                }
            ]
        },
        {
            path:'/about',
            component:About
        }
    ]
})

export default router

News.vue

<template>
    <div class="news"> 
        <ul>
            <li v-for="news in newsList" :key="news.id">
                <RouterLink to="/news/detail">{{ 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 {RouterLink} from 'vue-router'

    const newsList = reactive(
        [
            {id:'1', title:'title1', content:'content1'},
            {id:'2', title:'title2', content:'content2'},
            {id:'3', title:'title3', content:'content3'}
        ]
    )
</script>

Detail.vue

<template>
    <ul class="news-list">
        <li>?</li>

    </ul>
</template>

<script setup lang="ts" name="About">

</script>