嵌套路由

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

前提准备

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

<template>
  <RouterView />
</template>

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

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

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

<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组件下