在vue中實現點擊文字後的高亮顯示

1. 功能需求

（1）點擊導航欄中的相應文字，其所屬欄目就高亮顯示，那這個頁面所屬的欄目；
（2）點擊文字之後，進入相應的頁面，即實現路由跳轉。

2. 實現代碼

Bottom.vue：

<template>
  <div id="bottom">
    <ul>
      <li :class="{checkColor:item.ischeck}" @click="changeColor(index)" v-for="(item,index) in nav" :key="index">
        <icon-svg :icon-class="item.icon" />
        {{item.title}}
      </li>
    </ul>
  </div>
</template>

<script>
import menudata from './menudata'
export default {
  name: 'Bottom',
  data(){
    return { 
      nav:null,
      status:0
    }
  },
  mounted(){
    this.nav=menudata.nav;
    this.status=menudata.s;
  },
  methods:{
    changeColor(index){
      // 控制當前頁面進行修改
      this.nav[this.status].ischeck=false;
      this.nav[index].ischeck=true;
      this.status=index;

      // 編程式路由 
      // 用a鏈接會將圖標的點擊顏色抵消掉
      this.$router.push({
        path:this.nav[index].path
      });

      // 修改底層數據
      menudata.nav=this.nav;
      menudata.s=index;
    }
  }
}
</script>

<style lang="scss" scope>
  @import '../../assets/css/iconfont.css';
  #bottom{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4rem;
    background-color: rgb(240, 240, 240);
    ul{
      display: flex;
      flex-direction: row;
      li{
        flex: 1;
        list-style: none;
        display: flex;
        flex-direction: column;
        text-align: center;
        .svg-icon{
          flex: 1;
          font-size: 1.6rem;
          margin: 0.45rem 2.55rem;
        }
        a{
          flex: 1;
          text-decoration: none;
          color: #000;
          font-size: 0.9rem;
        }
      }
    }
  }
  .checkColor{
    color: green !important;
  }
</style>

• 組件在加載時，頁面重新渲染，數據進行初始化。因此需將數據建成外部的配置文件，通過配置文件加載（配置文件的數據是統一的），即可新建一個名爲menudata.js的文件。

menudata.js：

let menudata={
    nav:[
        {
            title:"微信",
            path:"/",
            icon:"xingzhuangjiehe",
            ischeck:false
          },
          {
            title:"通訊錄",
            path:"/User",
            icon:"tongxunlu",
            ischeck:false
          },
          {
            title:"發現",
            path:"/Find",
            icon:"faxian",
            ischeck:false
          },
          {
            title:"我的",
            path:"/My",
            icon:"yonghu_zhanghao_wode",
            ischeck:false
          }
    ],
    // 接收之前的變量
    s:0
};
export default menudata;

3. 目錄結構