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

相关推荐
街尾杂货店&6 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈7 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
金梦人生1 小时前
Css性能优化
前端·css
Holin_浩霖1 小时前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖1 小时前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇1 小时前
CSS属性继承与特殊值
前端·css
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
peachSoda71 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
我有一棵树1 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex