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

相关推荐
Li_Ning215 分钟前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一1 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla1 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡1 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu1 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c1 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪1 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆1 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻2 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。3 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui