vue3router-view嵌套

在Vue 3中，使用Vue Router进行路由管理时，可以实现嵌套路由的效果。嵌套路由允许将多个视图组件嵌套在一个父级路由下。

要实现嵌套路由，你需要在父级路由组件中使用`<router-view>`标签来显示子级路由的视图。在子级路由组件中也可以再次使用`<router-view>`标签来嵌套更深层次的子级路由。

下面是一个简单的示例，演示如何在Vue 3中实现嵌套路由：

<!-- App.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-view></router-view> <!-- 嵌套的子级路由视图将会显示在这里 -->
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h2>About Page</h2>
  </div>
</template>

<!-- Contact.vue -->
<template>
  <div>
    <h2>Contact Page</h2>
  </div>
</template>

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
];

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

export default router;

在上面的示例中，`<router-view>`标签被用于App.vue组件和Home.vue组件中，以显示对应的子级路由视图。当访问根路径时，将会显示Home.vue组件的内容，并且在Home.vue组件中的`<router-view>`标签处显示子级路由（About.vue和Contact.vue）的内容。

希望这个示例能够帮助你理解Vue 3中如何实现嵌套路由。如果有任何疑问，请随时追问。