vue+elementui的layout布局中根据路由生成左侧菜单栏

在 Vue 后台管理系统中,构建一个支持多级路由的 Layout 布局是常见的需求。以下是一个完整的示例,展示了如何实现这一功能,包括基本的路由配置、布局组件和子路由的实现。

1. 安装 Vue 和相关依赖

首先,确保你安装了 Vue 和 Vue Router。如果没有安装,可以使用以下命令进行安装:

复制代码
bash
复制代码
npm install vue vue-router element-ui

2. 配置路由

假设我们需要一个支持多级路由的后台管理系统,首先定义好路由配置:

javascript 复制代码
js
复制代码
// src/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Layout from '@/components/Layout.vue';

Vue.use(Router);

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard.vue'),
      },
      {
        path: 'users',
        name: 'Users',
        component: () => import('@/views/Users.vue'),
        children: [
          {
            path: 'profile',
            name: 'UserProfile',
            component: () => import('@/views/UserProfile.vue'),
          },
          {
            path: 'settings',
            name: 'UserSettings',
            component: () => import('@/views/UserSettings.vue'),
          },
        ],
      },
      {
        path: 'settings',
        name: 'Settings',
        component: () => import('@/views/Settings.vue'),
      },
    ],
  },
];

const router = new Router({
  routes,
});

export default router;

3. 创建 Layout 组件

Layout 组件用于包含公共的导航和内容区域:

xml 复制代码
vue
复制代码
<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="/">Dashboard</el-menu-item>
        <el-submenu index="/users">
          <template slot="title">Users</template>
          <el-menu-item index="/users/profile">Profile</el-menu-item>
          <el-menu-item index="/users/settings">Settings</el-menu-item>
        </el-submenu>
        <el-menu-item index="/settings">Settings</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Layout',
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
  },
};
</script>

<style>
/* 添加必要的样式 */
</style>

4. 创建视图组件

创建一些示例视图组件:

xml 复制代码
vue
复制代码
// src/views/Dashboard.vue
<template>
  <div>Dashboard</div>
</template>

<script>
export default {
  name: 'Dashboard',
};
</script>
xml 复制代码
vue
复制代码
// src/views/Users.vue
<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'Users',
};
</script>
xml 复制代码
vue
复制代码
// src/views/UserProfile.vue
<template>
  <div>User Profile</div>
</template>

<script>
export default {
  name: 'UserProfile',
};
</script>
xml 复制代码
vue
复制代码
// src/views/UserSettings.vue
<template>
  <div>User Settings</div>
</template>

<script>
export default {
  name: 'UserSettings',
};
</script>
xml 复制代码
vue
复制代码
// src/views/Settings.vue
<template>
  <div>Settings</div>
</template>

<script>
export default {
  name: 'Settings',
};
</script>

5. 在主应用中使用路由

在主应用组件中配置路由并使用 Layout 组件:

xml 复制代码
vue
复制代码
// src/App.vue
<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
};
</script>

6. 运行项目

确保所有组件和路由配置正确后,运行项目:

arduino 复制代码
bash
复制代码
npm run serve

结果

这样,后台管理系统的布局将支持多级路由,通过 Layout 组件进行统一管理,侧边栏导航可以切换不同的页面,同时在内容区域展示相应的视图。

相关推荐
艾小逗2 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇6 小时前
前端国际化看这一篇就够了
前端
大G哥6 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext6 小时前
html初识
前端·html
小小小小宇6 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827526 小时前
vue中 vue.config.js反向代理
前端
Java&Develop6 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk6 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务