no message

Former-commit-id: e9afbfdfc5401e30010c366c81e63201498e9e5e
Former-commit-id: 2bb91cd986e4e13dec5597c56414e70ce55a9874
Former-commit-id: cec21053e441bf3fd18128d33f720821fcd0f6b5
This commit is contained in:
李杨
2018-03-08 21:50:16 +08:00
parent 867da8ed43
commit 5ad968820e

View File

@@ -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>