vue-router二级导航切换路由及高亮显示的实现方法

<!-- -->
<template>
 <div>
 发现
 </div>
</template>


<script>
export default {
 name: "discover",
 data() {
 return {
 };
 }
};
</script>
<style scoped>
</style>

name: "mymusic"

import DisCover from '@/ponents/DisCover'
import MyMusic from '@/ponents/MyMusic'
……

 routes: [
 {
  path: '/discover',
  name: 'discover',
  ponent: DisCover
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  ponent: MyMusic
 }
 ]

 guides:[
  {
   id:0,
   name:'发现音乐',
   link:'/discover'
  },{
   id:1,
   name:'我的音乐',
   link:'/mymusic'
  },
  {
   id:2,
   name:'朋友',
   link:'friend'
  },
  {
   id:3,
   name:'商城',
   link:'mall'
  },
  {
   id:4,
   name:'音乐人',
   link:'musician'
  },
  {
   id:5,
   name:'下载客户端',
   link:'download'
  }
  ]

  <ul class="nav nav-pills main-nav">
   <li v-for="(item,index) in guides" :key="index" role="presentation"
   :class="item.id==guidecurrent?'guide-active':''"
    >
    <router-link :to="item.link">{{item.name}}</router-link>
    </li>
   
   </ul>

<template>
 <div id="app">
 <Guide></Guide>
 <router-view/>
 </div>
</template>

guidecurrent:0

.guide-active{
 background: black;
}

.guide-active::after {
 content: "◢◣";
 font-size: 8px;
 position: absolute;
 color: rgb(182, 15, 15);
 : 87%;
 left: 50%;
 transform: translate(-10px, -5px);
}

 <li v-for="(item,index) in guides" :key="index" role="presentation"
  :class="item.id==guidecurrent?'guide-active':''"
   >
  <router-link :to="item.link">{{item.name}}</router-link>
 </li>

routes: [
 {
  path: '/discover',
  name: 'discover',
  ponent: DisCover,
  children:[
  {path:'rec',ponent:recmend},
  {path:'rank',ponent:rank},
  ]
 },
 {
  path: '/mymusic',
  name: 'mymusic',
  ponent: MyMusic
 }
 ]

 <ul class="nav nav-pills">
  <li role="presentation" v-for="(item,index) in guides" :key="index"
   :class="item.id==discovercurrent?'active':''"
  >
   <router-link :to="item.id">{{item.name}}</router-link>
  </li>
  </ul>