no message
Former-commit-id: e9afbfdfc5401e30010c366c81e63201498e9e5e Former-commit-id: 2bb91cd986e4e13dec5597c56414e70ce55a9874 Former-commit-id: cec21053e441bf3fd18128d33f720821fcd0f6b5
This commit is contained in:
@@ -1,88 +0,0 @@
|
||||
<template>
|
||||
<el-menu class="el-menu-demo" mode="horizontal">
|
||||
<el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
|
||||
<el-menu-item
|
||||
v-for="(item, index) in menu"
|
||||
:key="index"
|
||||
:index="String(index)"
|
||||
@click.native="active(item)">
|
||||
{{item.title}}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapMutations } from 'vuex'
|
||||
import { menu, router } from '@/router/menu/index.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
menu,
|
||||
router
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 当前路由的name
|
||||
routeName () {
|
||||
return this.$route.name
|
||||
},
|
||||
// 当前路由是否是顶级菜单
|
||||
// 顶级菜单就是在顶栏里显示的菜单
|
||||
// 二级菜单是在侧边栏显示的菜单
|
||||
// 三级菜单是二级菜单展开的
|
||||
routeIsTopLevel () {
|
||||
return !!this.router.find(e => e.name === this.routeName)
|
||||
},
|
||||
// 不管当前路由是不是顶级菜单 都返回这个路由所属的顶级菜单对象的name
|
||||
// 如果返回 undefined 代表这个路由不是在菜单里显示的路由
|
||||
routeTopLevel () {
|
||||
if (this.routeIsTopLevel) {
|
||||
return this.routeName
|
||||
} else {
|
||||
const find = this.router.find(e => {
|
||||
return e.children.find(child => {
|
||||
return child.name === this.routeName
|
||||
})
|
||||
})
|
||||
return find ? find.name : undefined
|
||||
}
|
||||
},
|
||||
// 返回当前对象对应的顶级菜单 这个菜单可以在侧边栏菜单中直接使用
|
||||
// 如果返回 undefined 代表这个路由没有对应的一级路由也就没有菜单
|
||||
routeTopLevelMenu () {
|
||||
if (this.routeTopLevel) {
|
||||
return this.menu.find(e => e.name === this.routeTopLevel).children
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
routeName () {
|
||||
this.doSetSideMenu()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.doSetSideMenu()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations([
|
||||
'setSideMenu'
|
||||
]),
|
||||
// 更新一次侧边栏
|
||||
doSetSideMenu () {
|
||||
if (this.routeTopLevelMenu) {
|
||||
this.setSideMenu({
|
||||
sideMenu: this.routeTopLevelMenu
|
||||
})
|
||||
}
|
||||
},
|
||||
// 跳转到某个路由
|
||||
active (item) {
|
||||
this.$router.push({
|
||||
name: item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user