vue3路由——嵌套多级路由

1.childen里写的path路径尽量把父级路由也要写出来，routerlink标签to属性也要把父级的路由写出来。2.父级和子代的组件加载方式保持一致，要么全都使用懒加载，要么全部采用头部引入的方式。aobout里嵌套a路由嵌套 a1,a2，a3。about嵌套b路由嵌套b1，b2，b3。三级：橙子、柚子、柠檬......template里的写法：一级。二级：柑橘类水果下的目录。

我谈山美，我说你媚

739人浏览 · 2023-08-29 15:56:15

我谈山美，我说你媚 · 2023-08-29 15:56:15 发布

 {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      children: [
        {
          path: 'a',
          component: () => import('../views/AView.vue'),
          children: [
            {
              path: 'a1',
              component: () => import('../views/A1View.vue')
            },
            {
              path: 'a2',
              component: () => import('../views/A2View.vue')
            },
            {
              path: 'a3',
              component: () => import('../views/A3View.vue')
            }
          ]
        },
        {
          path: 'b',
          component: () => import('../views/BView.vue'),
          children: [
            {
              path: 'b1',
              component: () => import('../views/B1View.vue')
            },
            {
              path: 'b2',
              component: () => import('../views/B2View.vue')
            },
            {
              path: 'b3',
              component: () => import('../views/B3View.vue')
            }
          ]
        }
      ]
    },

aobout里嵌套a路由嵌套 a1,a2，a3

about嵌套b路由嵌套b1，b2，b3

template里的写法：一级

<ul>
  <li><RouterLink to="/about/a">柑橘类水果</RouterLink></li>
  <li><RouterLink to="/about/b">浆果类水果</RouterLink></li>
</ul>
<RouterView></RouterView>

二级：柑橘类水果下的目录

  <div class="about">
  <RouterLink to="/about/a/a1">橙子</RouterLink>
  <RouterLink to="/about/a/a2">柚子</RouterLink>
  <RouterLink to="/about/a/a3">柠檬</RouterLink>
    </div>
    <div>
      <RouterView></RouterView>
    </div>

浆果类水果的目录

<div class="about">
  <RouterLink to="/about/b/b1">草莓</RouterLink>
  <RouterLink to="/about/b/b2">蓝莓</RouterLink>
  <RouterLink to="/about/b/b3">覆盆子</RouterLink>
    </div>
    <div>
      <RouterView></RouterView>
    </div>

三级：橙子、柚子、柠檬......

<template>
  <div>
    <img src="https://img1.baidu.com/it/u=1875141729,1602863409&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
  </div>
</template>

注意：

1.childen里写的path路径尽量把父级路由也要写出来，routerlink标签to属性也要把父级的路由写出来

2.父级和子代的组件加载方式保持一致，要么全都使用懒加载，要么全部采用头部引入的方式