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 组件进行统一管理，侧边栏导航可以切换不同的页面，同时在内容区域展示相应的视图。