功能描述:点击二级路由切换时一级父路由样式依然保留,如下所示
注意看页面地址变化
功能实现代码(只展示主要代码,css样式请自行编写):
注意:只需底部父组件代码改动,其他组件不变
<template>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
<!-- 底部导航栏-->
<el-row class="bottom-nav">
<router-link
v-for="(i,index) in list"
:key="index"
@click="addClassName(i.path)"
:to="i.path">
<el-col :span="8">
<!-- 三元表达式-->
<div><img :src="i.path===pathRouter?list[index].active : list[index].img"></div>
<div class="grid-content">{{i.name}}</div>
</el-col>
</router-link>
</el-row>
</div>
</template>
<script>
export default {
name: "homePage",
data() {
return {
pathRouter: '/homePage',
list:[
{
img: require("../../assets/image/homePage-1.png"), //原始显示的图标
active: require("../../assets/image/homePage.png"), //点击之后要显示的图标
name: "首页",
path: "/homePage"
},
{
img: require("../../assets/image/news-1.png"),
active: require("../../assets/image/news.png"),
name: "消息",
path: "/news"
},
{
img: require("../../assets/image/myself-1.png"),
active: require("../../assets/image/myself.png"),
name: "我的",
path: "/myself"
}
],
}
},
methods: {
addClassName: function(path) {
this.$router.replace(path);
},
getRoute() {
// 获取当前路由地址
let path = this.$route.path;
if (path ==="/homePage/homePagePeople"||path ==="/homePage/homePageOwn"||path ==="/homePage/homePageLike") {
this.pathRouter="/homePage";
console.log("path为"+this.pathRouter);
}else{
this.pathRouter=this.$route.path;
}
}
},
// 监听路由变化
watch:{
'$route':'getRoute'
}
}
</script>
若看不懂或者有什么问题请在下方留言