Vue3实现简约型侧边栏的示例代码

目录

• 1、首先配置好路由地址
• 2、然后实现页面入口
• 3、然后实现AAAAAA和BBBBBB页面

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

如此，简单实现如下：

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、效果如下：~

到此这篇关于Vue3实现简约型侧边栏的示例代码的文章就介绍到这了,更多相关Vue3 侧边栏内容请搜索讯客以前的文章或继续浏览下面的相关文章希望大家以后多多支持讯客！