vue+elementui搭建后台管理界面(3侧边栏菜单)

摘要:
主框架已在上一节中设置,但选项卡和边栏仅显示各自的菜单。如何将它们联系起来?

上一节搭好了主框架,但是标签页和侧边栏只是分别展示了各自的菜单,如何将二者联动起来?
定义路由规则:当有 children 属性时,从 children 里取出 path 填充到侧边栏,如:

{
  path: '/',
  redirect: '/dashboard',
  name: 'Container',
  component: Container,
  children: [
    {path: 'dashboard', name: '首页', component: Dashboard, },
    {path: 'article', name: '文章', component: Article, },
  ]
}

该路由的 children 有2个子路由,我期望生成如下菜单:
vue+elementui搭建后台管理界面(3侧边栏菜单)第1张

1 新增组件

新增 views/dashboard/index.vue

<template>
  <h1>dashboard</h1>
</template>

views/article/index.vue

<template>
  <h1>Article</h1>
</template>

此时 src 的目录结构

│  App.vue
│  main.js
├─assets
│      logo.png
├─components
│      HelloWorld.vue
├─container
│      Container.vue
├─router
│      index.js
├─styles
│      index.scss
└─views
    │  TheLogin.vue
    ├─article
    │      index.vue
    └─dashboard
            index.vue

2 修改路由

修改 src/router/index.js :

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/TheLogin'
import Container from '@/container/Container'
import Dashboard from '@/views/dashboard'
import Article from '@/views/article'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      redirect: '/dashboard',
      name: 'Container',
      component: Container,
      children: [
        {path: 'dashboard', name: '首页', component: Dashboard, },
        {path: 'article', name: '文章', component: Article, },
      ]
    }
  ]
})

3 页面主框架

修改 src/container/Container.vue
el-header 的样例菜单替换为

<el-menu default-active="/"
        router
           
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#409EFF">
  <el-menu-item index="/">首页</el-menu-item>
</el-menu>

el-aside 的样例菜单替换为

<el-menu :default-active="defaultActive"
        router
           
          @open="handleOpen"
          :collapse="isCollapse">
  <template v-for="route in $router.options.routes" v-if="route.children && route.children.length">
      <template v-for="item in route.children" >
        <el-menu-item 
          :key="route.path + '/' + item.path"
          :index="item.path"
        >
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.name }}</span>
      </el-menu-item>
      </template>
  </template>
</el-menu>

此时的页面:
vue+elementui搭建后台管理界面(3侧边栏菜单)第2张
vue+elementui搭建后台管理界面(3侧边栏菜单)第3张

免责声明:文章转载自《vue+elementui搭建后台管理界面(3侧边栏菜单)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Spring Boot 2.0的属性绑定mingw链接opengl下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

手动部署kubernetes(k8s)和利用ansible自动部署k8s

1. 百度网盘链接:含自动部署脚本和手动部署文档 链接:https://pan.baidu.com/s/1xZPbImxCOG6WFMvR0Wua3g 提取码:7y66 2.  1.15版本dashboard是中文版,且应用了ngress-nginx,1.17版本只部署了dashboard,且为英文版本;...

vue+elementui搭建后台管理界面(6登录和菜单权限控制)

不同的权限对应不同的路由(菜单),同时侧边栏也根据权限异步生成,实现登录和鉴权思路如下: 登录:点击登录,服务器验证通过后返回一个 token ,然后存到 cookie,再根据 token 拉取用户权限 鉴权:通过 token 获取对应的roles, 计算有权限的路由,使用 router.addRoutes 动态加载路由 数据和操作通过 vuex 进行...

002.使用kubeadm安装kubernetes 1.17.0

一 环境准备 1.1 环境说明 master      192.168.132.131      docker-server1 node1       192.168.132.132      docker-server2 node2       192.168.132.133      docker-server3 1.2 docker版本 [root@...

nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)

前提:安装好nginx,如果已经启动nginx,先停止,命令: ./usr/local/nginx/sbin/nginx -s stop 修改nginx配置 vi /usr/local/nginx/conf/nginx.conf 配置好以后的nginx.conf文件内容: #user nobody; worker_processes 1;...

kubeadmin搭建k8s集群

一、准备环境 准备环境: 角色 IP地址 k8s-master 192.168.56.21 k8s-node01 192.168.56.25 k8s-node02 192.168.56.26 所有节点环境初始化: 关闭防火墙: systemctl stop firewalld systemctl disable firewalld 关...

记录idea run dashboard设置 (微服务项目多服务启动)

微服务项目的开发过程中,工程会非常多,经常要启动很多个服务,才能完成一项测试。启动的多了,容易开发者带来错乱的感觉,很不方便管理。在idea作为开发工具时,推荐一个很好用的功能--Run Dashboard。 Run Dashboard面板如下   设置打开Run Dashboard (View-》Tool Windows-》Run Dashboard)...