嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构

前提准备

 |---src/views
     |---home
        home.vue
     |---about
        about.vue
        about1.vue
        about2.vue

App.vue

<template>
  <RouterView />
</template>

home.vue

<template>
  <p>home</p>
</template>

about.vue

<template>
  <p>about</p>
  <RouterView />
</template>

about1.vue

<template>
  <p>about1</p>
</template>

about2.vue

<template>
  <p>about2</p>
</template>

路由配置

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
      children: [
        {
          path: 'about1',
          name: 'about1',
          component: () => import('../views/about/about1.vue'),
        },
        {
          path: 'about2',
          name: 'about2',
          component: () => import('../views/about/about2.vue'),
        },
      ],
    },
  ],
})

export default router

首先我们存在home和about两个页面，about下又存在about1和about2两个子页面

现在分别去访问

• http://localhost:5173/
• http://localhost:5173/about
• http://localhost:5173/about/about1

注意

子路由的路径地址不要再加/，如： path: 'about1'而不是 path: '/about1'

整个项目的路由都要有出口。而出口用<RouterView />标签承载，比如项目的路由在App.vue根组件下，而about1和about2两个子路由的出口在about.vue组件下
至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。