vue动态class——实现tag的选中状态

vue动态class——实现tag的选中状态

<template>
  <div class="common-nav">
    <div class="nav is-flex">
      <div class="nav-left">
        <router-link to="/" class="nav-left-a" :class="{on: isCurrent('/')}">首页
        </router-link>
        <router-link to="/article" class="nav-left-a" :class="{on: isCurrent('/article')}">文章
        </router-link>
        <router-link to="/about" class="nav-left-a" :class="{on: isCurrent('/about')}">关于
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "common-nav",
    data() {
      return {}
    },
    methods: {
      isCurrent(path) {
        console.log(this.$route.path)
        return this.$route.path === path
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/varibles.styl"
  .common-nav {
    width 100%
    margin-bottom 88px
    .nav {
      position fixed
      top 0
      left 0
      z-index 1515
      width 100%
      height 58px
      line-height 58px
      font-size 18px
      padding 0 15px
      background #fff
      box-shadow 0 2px 8px rgba(0, 0, 0, 0.1)
    }
    .nav-left {
      display flex
      width 60%
      align-items center
    }
    .nav-left-a {
      width 100px
      color #333
      text-align center
    }
    .nav-left-a:hover {
      box-shadow 0 0 5px rgba(0, 0, 0, 0.2)
      border-bottom 5px solid $primary
      color $primary
    }
    .on {
      border-bottom 5px solid $primary
      color $primary
    }
  }
</style>