<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>

?

轉載于:https://www.cnblogs.com/dujunfeng/p/7918771.html

總結

以上是生活随笔為你收集整理的vue 导航栏切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。