vue的二级路由切换父组件图片不变

功能描述:点击二级路由切换时一级父路由样式依然保留,如下所示

注意看页面地址变化

功能实现代码(只展示主要代码,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>

若看不懂或者有什么问题请在下方留言

发布了11 篇原创文章 · 获赞 2 · 访问量 746

猜你喜欢

转载自blog.csdn.net/qq_41589917/article/details/103894228