vue 引入公共tab添加選中效果

<template>
  <div>
    <div class="head-nav">
        <div class="nav flex-start">
          <div class="nav-content">
            <img
              class="logo"
              src="@/images/logo-b.png"
              alt=""
            >
          </div>
      <--每個router-link選中時自帶router-link-active類名，直接給此class添加樣式即可，默認選中第一個-->
          <div class="nav-li flex-center" id="nav">
            <router-link class="nav-item" :to="{name:'home'}">首頁</router-link>
            <router-link class="nav-item " :to="{name:'about'}" >關於我們</router-link>
            <router-link class="nav-item" :to="{name:'talent-culture'}" >人才文化</router-link>
            <router-link class="nav-item" :to="{name:'news-trends'}" >新聞動態</router-link>
            <router-link class="nav-item" :to="{name:'join-us'}">加入陀螺</router-link>
          </div>
          <div>簡 / 繁 / EN</div>
        </div>
      </div>
  </div>
</template>
<script>
export default {

  data() {
    return {
        cur:0
    };
  },
  computed: {},
  mounted() {

  },
  methods: {

  }
};
</script>

<style scoped>
.head-nav {
  width: 100%;
}
.nav {
  width: 88%;
  height: 5.74rem;
  margin: auto;
  font-size: 1.4rem;
}
.logo {
  width: 7.7rem;
  height: 2.8rem;
}
.nav-li {
  flex-grow: 1;
}
.nav-item{
  padding: 0 0 0.6rem 0;
}
.nav-li a {
  margin-right: 5.3rem;
  font-size:1.4rem;
  font-weight:bold;
  color:rgba(53,51,64,1);
}
.nav-li a:last-child{
  margin-right: 0;
}
.nav-li .router-link-active:first-child{
  border-bottom:0.4rem solid transparent;
}
/*每個router-link選中時自帶router-link-active類名，直接給此class添加樣式即可，默認選中第一個*/
.router-link-active{
    border-bottom:0.4rem solid rgba(0,57,167,1);
}
</style>

app.vue

<script>
import Header from "@/views/nav"
</script>