vue3点击子路由,子路由变成新的页面展示

要实现点击子路由后子路由变成新的页面展示，可以在Vue Router中使用嵌套路由。具体步骤如下：

1. 在父组件中定义一个<router-view>标签，用于展示子路由组件。

2. 在路由配置文件中，定义父路由和子路由的路径。

3. 在父路由对应的组件中，使用<router-link>标签来定义子路由的路径。

4. 在子路由对应的组件中，编写需要展示的内容。

下面是一个示例代码：

// 路由配置文件

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Detail from '@/views/Detail.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'detail/:id',
        name: 'Detail',
        component: Detail
      }
    ]
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

<!-- About.vue -->

<template>
  <div>
    <h1>About Page</h1>
    <router-link :to="{ name: 'Detail', params: { id: '1' } }">Detail 1</router-link>
    <router-link :to="{ name: 'Detail', params: { id: '2' } }">Detail 2</router-link>
    <router-view></router-view>
  </div>
</template>

<!-- Detail.vue -->

<template>
  <div>
    <h1>Detail Page {{ $route.params.id }}</h1>
  </div>
</template>

在这个示例中，当用户点击About页面上的Detail 1或Detail 2链接时，路由会切换到子路由Detail，并且会展示对应的内容。