基于Vue3实现简约型侧边栏

有时遇到一些需求，需要实现左边侧边栏为父级菜单，右侧内容区的顶部为子级菜单，以及其底部为子级菜单对应的模块内容。

如此，简单实现如下：

1、首先配置好路由地址【如：/src/router/index.ts】

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array = [
  {
    path: '/',
    redirect: '/xxxxxx'
  },
  {
    path: '/xxxxxx',
    name: '帅龍之龍',
    component: () => import('@/views/XXXXXX/index.vue'),
    children: [
      {
        path: '/xxxxxx/aaaaaa',
        name: '赤龍神帝',
        components: { AAAAAA: () => import('@/views/XXXXXX/AAAAAA/index.vue') },
        children: []
      },
      {
        path: '/xxxxxx/bbbbbb',
        name: '待定栏目',
        components: { BBBBBB: () => import('@/views/XXXXXX/BBBBBB/index.vue') },
        children: [],
      },
    ]
  }
]

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

export default router

2、然后实现页面入口【如：/src/views/XXXXXX/index.vue】

3、然后实现AAAAAA和BBBBBB页面
【如：/src/views/XXXXXX/AAAAAA/index.vue    /src/views/XXXXXX/BBBBBB/index.vue】

4、效果如下：~