Style changes and single-page transitions when tab pages are switched

In the vue project, how to select the switching style? as shown below

For example .active, if the selected class style is added according to jquery or the original idea, it is nothing more than clearing the brother's and .activeadding your own..active

• This kind of selection switch, the idea in Vue is very simple, when a certain is selected, the corresponding label will have .router-link-active
  a class name. Then you don't need to add any class name to the router-link tag, just write the style directly in the style:

.router-link-active{
    background:blue;
    opacity:1
}

• Of course, in many cases, if there is more than one router-link, each with its own selected style, then using the default .router-link-active
  to change the style can no longer meet the development needs. At this time, you can add it in the tag.active-class="自己定义一个名字“

Examples are as follows

<router-link :to="{name:'shengchan'}" active-class="active">
          <el-tooltip class="item" effect="light" content="生产管理系统" placement="right">
            <div index="1">
              <img src="../../assets/images/shengchan.png" alt="">
            </div>
          </el-tooltip>
        </router-link>

<style>
  .nav-bar .active .item{
    background: #046499;
    opacity:1;
  }
</style>

When switching, I also hope that the transformation of the content part has a transition effect, then the vue transition is used <transtion>, which will be wrapped in the transition

<transition name="fade">
          <router-view></router-view>
 </transition>

<style>
    .fade-enter-active,.fade-leave-active{
    transition: opacity .6s;
  }
  .fade-enter,.fade-leave-active{
    opacity:0;
  }
<style>

A simple transition effect can be achieved