简单版 vue 导航栏切换

<template>
  <footer class="menu">
    <router-link to="/" class="menu_div">

        <i class="menu_divi2 menu_divi icon iconfont icon-shouye"></i>
        <p class="menu_divp2 menu_divp">首页</p>


    </router-link>

    <router-link to="/Hfenlei"  class="menu_div">

        <i class="menu_divi icon iconfont icon-leimupinleifenleileibie2"></i>
        <p class="menu_divp">分类</p>

    </router-link>
    <router-link to="/Discovery" class="menu_div">
      <div>
        <i class="menu_divi icon iconfont icon-zhinanzhen1"></i>
        <p class="menu_divp">发现</p>
      </div>
    </router-link>
    <router-link to="/ShopCartindex" class="menu_div">
      <!--<div>-->
        <i class="menu_divi icon iconfont icon-gouwuche"></i>
        <p class="menu_divp">购物车</p>
      <!--</div>-->
    </router-link>

    <router-link to="/Login" class="menu_div">
      <!--<div>-->
        <i class="menu_divi icon iconfont icon-wo"></i>
        <p class="menu_divp">我的博库</p>
      <!--</div>-->
    </router-link>

  </footer>
</template>

<script type="text/ecmascript-6">
    export default {
      mounted(){
        let now = this.$route.path;
          console.log(now)
        var nowArr=["/","/Hfenlei","/Discovery","/ShopCartindex","/Login"];
        nowArr.forEach(function(item,index){
          console.log(item,index)
          if(now == item){
            $(".menu i").eq(index).addClass("red");
            $(".menu p").eq(index).addClass("red");
            console.log("=")
          }
        })
      }
    }
</script>

<style scoped>
.red{
  color:#2ab4e8;
}
</style>