vue bottom of the navigation toggle icon and click on the page functions implemented

Functional Requirements: Click the bottom navigation bar to switch images and pages (an effect)

(The following code shows only the important part, css and other styles, please write your own)

Father component code (page navigation bar)

<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===$route.path?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",
        props:['tabName'],
        data() {
            return {
                num:true,
               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);
            },
        }
    }
</script>

note: Images must use require

Sub-component parts

Routing configuration router.js

To see the two parent component route switching style retention Seehttps://blog.csdn.net/qq_41589917/article/details/103894228
If there are other doubts, please leave a message below