4个页面同一个菜单 （菜单是子组件 ）
实现点击跳转，并选中对应的 菜单
有什么疑问欢迎留言 ，感谢大家
源代码：
<template>
<div class="navbox mt20 mr30" ref="nav">
<a href="JavaScript:void(0)" class="flex row-center" v-for="(item,i) in editNav" :key="i" @click="clickNav(i)" :class="{cur:i==current}">
<div>{{item.navIcon}}</div>
<span>{{item.navName}}</span>
</a>
</div>
</template>
<script>
export default {
name: 'EditNav',
components: {
},
data(){
return {
current:null,
editNav:[
{navName:'技术百科',navIcon:'icon'},
{navName:'国家政策',navIcon:'icon'},
{navName:'行业之声',navIcon:'icon'},
{navName:'突出问题',navIcon:'icon'},
]
}
},
methods:{
clickNav(index){
if(index ==0){
const {href} = this.$router.resolve({
path: '/SpecialDetails/edit/EditTechnology',
query: {
eventId:this.eventId,
eventName:this.eventName,
current:index
}
});
window.open(href,'_blank');
}
if(index ==1){
const {href} = this.$router.resolve({
path: '/SpecialDetails/edit/EditNationalPolicy',
query: {
eventId:this.eventId,
eventName:this.eventName,
current:index
}
});
window.open(href, '_blank');
}
if(index ==2){
const {href} = this.$router.resolve({
path: '/SpecialDetails/edit/EditIndustry',
query: {
eventId:this.eventId,
eventName:this.eventName,
current:index
}
});
window.open(href, '_blank');
}
if(index ==3){
const {href} = this.$router.resolve({
path: '/SpecialDetails/edit/EditProblem',
query: {
eventId:this.eventId,
eventName:this.eventName,
current:index
}
});
window.open(href,'_blank');
}
},
},
created () {
this.eventId = this.$route.query.eventId;
this.eventName = this.$route.query.eventName;
this.current = this.$route.query.current;
},
}
</script>
<style scoped lang="less">
@cur-color:#1890FF;
@black-color:#000000;
.navbox{
width:86px;
font-size:14px;
position: fixed;
top: 120px;
a{
width:100%;
height:86px;
color:fade(@black-color,85%);
background-color:fade(@black-color,3%);
margin-bottom:2px;
&.cur{
color:@cur-color;
background-color: fade(@cur-color,5%);
}
&:hover{
color:@cur-color;
background-color: fade(@cur-color,5%);
}
}
}
</style>
扫一扫
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
