Vue2.0路由动态路径的绑定

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36771997/article/details/78019693

<template>
  <div class="title" name="list">
   
     <!--通过v-for循环打印,:to进行绑定router-link的路径，然后结合router-link-active给激活a加样式-->
     <router-link :to="{ path: bar}" v-for="(bar, index) in title">
      <span  >
       {{ bar }}
       </span>
     </router-link> 
  </div>
</template>


<script>
export default {
  data () {
    return {
      title: [
        '新歌',
        '排行',
        '榜单',
        '歌手'
      ]
    }
  }
}
</script>


<style lang="css">
  .title {
    width: 100%;
    float: left;
  }
  .title span {
    cursor: pointer;
    display: inline-block;
    width: 20%;
    margin-left: 4%;
    font-size: 4vw;
    text-align: center;
    padding: 2% 0;
  }
  .router-link-active {
    color: #49A4F7;
    border-bottom: 2px solid #49A4F7;
  }
</style>