vue vuerouter的使用，高亮显示

新建vue项目

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <div class="footer-wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
  .footer-wrap{
    width: 100%;
    height: 100px;
    background-color: #333333;
  }
  .footer-wrap a{

    color: white;
    text-decoration: none;
    width: 33%;
    height: 100%;
    line-height: 100px;
    display: inline-block;
    font-size: 30px;
    text-align: center;
    border-right: 2px solid #cccccc;
  }
  *{
    margin: 0;
    padding: 0;
  }
  .router-link-active{
    background-color: purple;
  }
</style>

FindMusic.vue

<template>
    <div class="find-music">
        <p>发现音乐</p>
        <p>发现音乐</p>
        <p>发现音乐</p>
        <p>发现音乐</p>
    </div>
</template>

<script>
    export default {
        name: "FindMusic"
    }
</script>

<style scoped>

</style>

MyFriend.vue

<template>
    <div>
        <p>我的朋友</p>
        <p>我的朋友</p>
        <p>我的朋友</p>
        <p>我的朋友</p>
    </div>
</template>

<script>
    export default {
        name: "MyFriend"
    }
</script>

<style scoped>

</style>

MyMusic.vue

<template>
    <div>
        <p>我的音乐</p>
        <p>我的音乐</p>
        <p>我的音乐</p>
        <p>我的音乐</p>
    </div>
</template>

<script>
    export default {
        name: "MyMusic"
    }
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import FindMusic from "@/views/FindMusic"
import MyMusic from "@/views/MyMusic";
import MyFriend from "@/views/MyFriend";

Vue.use(VueRouter);

const router = new VueRouter({
   routes:[
       { path:'/find',component:FindMusic},
       { path:'/my',component: MyMusic},
       { path:'/friend',component:MyFriend}
   ]
});

export  default router