这是用来展示后台左侧导航的代码
<template>
<div>
<el-menu router unique-opened>
<el-submenu
:index="index + ''"
v-for="(obj, index) in data"
:key="obj.name"
>
<template slot="title">
<router-link
:to="obj.path === '/' || obj.path === '/appraise' ? obj.path : ''"
>
<i :class="obj.meta.icon"></i>
<span>{{ obj.meta.title }}</span>
</router-link>
</template>
<div v-for="data in obj.children" :key="data.name">
/* data.meta.show 是用来判断路由是否在左侧导航显示的 */
<el-menu-item-group v-if="data.meta.show">
<el-menu-item :index="`${obj.path}/${data.path}`">{{
data.meta.title
}}</el-menu-item>
<Deep-component
v-if="data.children"
:data="data.children"
></Deep-component>
</el-menu-item-group>
</div>
</el-submenu>
</el-menu>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'DeepComponent',
props: {
data: {
type: Array,
default: [],
},
},
name: 'DeepComponent',
computed: {
...mapState(['routes']),
},
}
</script>```