1.布局加样式
<div class="background_fff">
<div class="background_fff padding_20px">
<ul class="borderRight_e5e5e5">
<li class="color_000000 fontSize_16px fontWeight_500">用户管理</li>
<li class="marginTop_20px color_000000 fontSize_16px marginLeft_10px fontWeight_500" v-for="(item,index) in navList" :key="index" @click="goActive(item)" >
<p :class="active === item.id && !item.children ? 'color_d72a21' :''">{{ item.title }}</p>
<div v-if="item.children" class="marginLeft_20px marginTop_20px" :class="active !== item.id ? 'display_none' :'display_block'">
<div class="marginTop_20px" v-for="(it,idx) in item.children" :key="idx" @click="goActiveChild(item,it)" :class="activeChild == it.id ? 'color_d72a21' :''">{{ it.title }}</div>
</div>
</li>
</ul>
</div>
</div>
2.js 数据加路由跳转
export default {
name: '',
components: {},
data () {
return {
activeName:2,
active:'',
activeChild:'',
navList:[
{
id:2,
title:"你的title",
children:[
{
id:21,
title:"你的title",
path:'你的路由地址'
},
{
id:22,
title:"你的title",
path:'你的路由地址'
}
]
},
{
id:3,
title:"你的title",
path:'你的路由地址'
},
],
activeIndex:''
}
},
computed: {},
watch: {},
created () {
this.activeIndex = this.$route.path;
this.initActiveItem();
},
mounted () {
},
methods: {
goActive(item) {
this.active = item.id;
if (item.path && this.$route.path !== item.path) {
this.$router.push(item.path);
this.activeChild=''
}
},
goActiveChild(item, it) {
if (it.path && this.$route.path !== it.path) {
this.$router.push(it.path);
}
this.activeChild = it.id;
this.active = item.id;
},
initActiveItem() {
this.navList.map((item) => {
if (item.path && item.path === this.activeIndex) {
this.active = item.id;
this.activeIndex = item.path;
} else {
if (item.children) {
item.children.map((it) => {
if (it.path && it.path === this.activeIndex) {
this.active = item.id;
this.activeChild = it.id;
this.activeIndex = it.path;
}
});
}
}
});
},
}
}