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

相关推荐
江号软件分享21 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js