自定义菜单.png
先说一下自定义菜单的基本实现，当我们在做自定义菜单并实现初始选中及点击切换选中状态时，常规操作是这样的
<!-- HTML部分 -->
<ul class="tab-title">
<li @click="activeClick(index)" v-for="(item,index) in list" :key="index" v-bind:class="{active:index==activeIndex}">{{item.name}}</li>
</ul>
//js部分
export default {
data() {
return {
activeIndex: 0,
list:[
{name: '公司简介',value: 'company'},
{name: '平台优势',value: 'adv'},
{name: '联系我们',value: 'callMe'}
]
};
},
methods: {
activeClick(index){
console.log(index)
this.activeIndex = index;
this.$router.push({ name: this.list[index].value });//路由跳转
}
}
};
以上代码实现了自定义菜单的基本功能，但是并不完善，当我们选中某个标签并刷新页面时，页面的选中状态发生了变化，变成了默认选中的第一个，所以我们初始需要获取路由的值来给activeIndex重新赋值，可以通过以下调整来实现。
<!-- HTML部分 -->
<ul class="tab-title">
<!-- v-bind:class里换成通过value值来判断选中 -->
<li @click="activeClick(index)" v-for="(item,index) in list" :key="index" v-bind:class="{active:item.value==onActive}">{{item.name}}</li>
</ul>
//js部分
export default {
data() {
return {
onActive:'company',//可以选list的第一个value值，也可以为空
list:[
{name: '公司简介',value: 'company'},
{name: '平台优势',value: 'adv'},
{name: '联系我们',value: 'callMe'}
]
};
},
mounted () {
// console.log(this.$route)
//在这里做初始化的选中
this.onActive = this.$route.name
},
methods: {
activeClick(index){
console.log(index)
//点击时重新赋值
this.onActive = this.list[index].value;
this.$router.push({ name: this.list[index].value });//路由跳转
}
}
};
大功告成，如果大家有更好的实现方式请多多指点~
