:default-active="$route.path.slice(1)" // 通过路径自动匹配导航(已截取首位字符‘/’)
image
<el-aside width="200px">
<!-- 通过路径自动匹配导航(已截取首位字符'/') -->
<el-menu
:default-active="$route.path.slice(1)"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:unique-opened="true"
:router="true"
>
<el-submenu :index="item.id+''" v-for="(item,k) in menusList" :key="item.id">
<template slot="title">
<i :class="'iconfont icon-'+menuicon[k]"></i>
<span>{{item.authName}}</span>
</template>
<el-menu-item v-for="item2 in item.children" :index="item2.path" :key="item2.id">
<i class="el-icon-menu"></i>
<span>{{item2.authName}}</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
data() {
return {
menusList: {},
menuicon: ['users', 'tijikongjian', 'shangpin', 'danju', 'baobiao']
}
},
created() {
this.getmenus()
},
methods: {
async getmenus() {
const { data: res } = await this.$http.get('/menus')
if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
this.menusList = res.data
console.log(res.data)
}
}
网友评论