【Vue】面经基础版-二级导航高亮

实现思路

• 将a标签替换成 <router-link></router-link> 组件，配置to属性，不用加 #
• 结合高亮类名实现高亮效果 (推荐模糊匹配：router-link-active)

代码实现

Layout.vue

....
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>

<style>
   a.router-link-active {
      color: orange;
    }
</style>