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文章来源：https://www.toymoban.com/news/detail-531362.html
<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-item
v-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 object
item: {
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 function
this.onlyOneChild = null
return {}
},
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 = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath(routePath) {
return routePath ? this.basePath + '/' + routePath : this.basePath
},
},
}
</script>
4.引用组件文章来源地址https://www.toymoban.com/news/detail-531362.html
<SidebarItem v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
到了这里，关于Element-ui 路由导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
