Element-ui 路由导航

1.router数组

const routes = [{path: '/', redirect: '/home',},{path: '/home',name: 'home',components: {aside,default: main,header,},meta: {titel: '首页',icon: 'el-icon-location',},},{path: '/book',components: {aside,default: main,header,},meta: {icon: 'el-icon-location',titel: '预约管理',},children: [{path: 'reg1',components: {aside,default: main,header,},meta: {titel: '预约挂号',icon: 'el-icon-location',},},{path: 'reg2',components: {aside,default: main,header,},meta: {titel: '预约核酸检测',icon: 'el-icon-location',},},{path: 'reg3',components: {aside,default: main,header,},meta: {titel: '预约体检',icon: 'el-icon-location',},},{path: 'reg4',components: {aside,default: main,header,},meta: {titel: '预约排班',icon: 'el-icon-location',},},],},
]

2.下载插件（解决div的bug）

下载：
npm install --save vue-fragment
引用：
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)

3.创建sidebar-item

<template><fragment v-if="!item.hidden"><!-- 渲染菜单项 --><template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><el-menu-item :index="resolvePath(onlyOneChild.path)"><i :class="item.meta.icon"></i><span slot="title">{{ item.meta.titel }}</span></el-menu-item></template><!-- 渲染子菜单 --><el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body><template slot="title"><i :class="item.meta.icon"></i><span slot="title">{{ item.meta.titel }}</span></template><sidebar-itemv-for="child in item.children":key="child.path":is-nest="true":item="child":base-path="resolvePath(child.path)"class="nest-menu"/></el-submenu></fragment>
</template><script>
export default {name: 'SidebarItem',props: {// route objectitem: {type: Object,required: true,},isNest: {type: Boolean,default: false,},basePath: {type: String,default: '',},},data() {// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237// TODO: refactor with render functionthis.onlyOneChild = nullreturn {}},methods: {hasOneShowingChild(children = [], parent) {const showingChildren = children.filter(item => {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild = itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length === 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length === 0) {this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }return true}return false},resolvePath(routePath) {return routePath ? this.basePath + '/' + routePath : this.basePath},},
}
</script>

4.引用组件

  <SidebarItem v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />

Element-ui 路由导航相关推荐

修改element ui的导航菜单样式，包括下拉菜单
第一次使用element ui,根据项目需求,选择了NavMenu导航菜单, Element - The world's most popular Vue UI framework 首先将代码复制粘贴 ...
element ui路由配置文件_element-ui使用导航栏跳转路由的用法详解
最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考首先复制官网的例子,在这基础上 ...
Vue 结合Element UI 实现导航的 router 属性 expected boolean,got string
转自:https://blog.csdn.net/lindonglian/article/details/77532941 为了能通过el-menu-item的index实现动态路由跳转,得将el-m ...
element UI NavMenu 导航菜单样式修改
.el-menu { background-color: rgba(165, 42, 42, 0); } .el-menu.el-menu--horizontal { border: none; } ...
Element UI样式修改之NavMenu导航菜单
目录 Element UI样式修改之NavMenu导航菜单一.成果展示二.步骤三.完整代码 Element UI样式修改之NavMenu导航菜单一.成果展示 Element UI官网给出的例子 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
使用element UI导航菜单默认展开选中子菜单
vue项目中使用的element UI导航菜单:官网例子导航菜单默认展开主要涉及的关键属性: default-active与default-openeds的主要区别: default-active可 ...
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题，element-UI 中beforeLeave用法，echarts 无法获取属性“getAttribute”的值
Element UI 左侧折叠导航栏配合el-asid文字闪烁的问题 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eayAJOoj-1600259160168)(C: ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
element ui 菜单动态生成导航
1. 利用饿了么ui 的导航菜单组件 (el-menu)来结合后台返回的菜单数组进行循环嵌套. 2.看如下代码 <el-menu:default-active="activeIn ...

Element-ui 路由导航

Element-ui 路由导航

Element-ui 路由导航相关推荐

最新文章

热门文章