Lexus-media/src/views/parameter/ParameterIndex.vue

<template>
  <div class="parameter_index">
    <div class="parameter_tag">
      <div
        class="tag"
        v-for="(tag, index) in tagslist" :key="index"
        :class="{selected: '/parameterIndex/' + tag.path === childRouter}"
      >
        <router-link :to="'/parameterIndex/' + tag.path" tag="li" class="title">{{tag.title}}</router-link>
      </div>
    </div>
    <div class="parameter_table">
      <router-view/>
    </div>
  </div>
</template>

<script>
import { TAG } from '../../tableConfig/parameter';
// import CarSeries from './CarSeries';
export default {
  components:{
    // CarSeries
  },
  data() {
    return {
      tagslist: TAG
    }
  },
  computed: {
    childRouter: function() {
      return this.$route.path
    }
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style scoped lang="less">
.parameter_index{
  .parameter_tag{
    display: flex;
    justify-content: space-around;
    border: 1px solid #ccc;
    padding: 10px;
    .tag{
      width: 90px;
      height: 30px;
      background-color: #848484;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      &:hover{
        cursor: pointer;
      }
      li{
        color: #fff;
      }
    }
    .selected{
      background-color: #0056A0;
    }
  }
}
</style>