vue通过router.push跳转 怎么添加Class来改变点击选中的效果

<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :value="index"
        :class="{focus: index === current}"
        @click="changePage_Color"
        >{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      list: ['A', 'B', 'C', 'D', 'E', 'F'],
      current: ''
    }
  },
  mothods: {
    changePage (e) {
      this.color(e)
      this.page(e)
    },
    color (e) {
      this.current = e.target.value
    },
    page (e) {
      if (e.target.innerText === 'A') {
        this.$router.push('/a')
      }
      if (e.target.innerText === 'B') {
        this.$router.push('/b')
      }
    }
  }
}
</script>

<style scoped>
  ul {
    width: 500px;
    border: 1px solid red;
    padding: 5px;
    display: flex;
    justify-content: space-between;
  }
  li {
    margin: 5px;
    border: 1px solid #000;
    font-size: 30px;
    cursor: pointer;
  }
  .focus {
    color: red;
  }
</style>

<template>
  <div>
    <nav-bar/>
    <div class="content">A页面</div>
  </div>
</template>

<script>
import NavBar from './navbar'
export default {
  name: 'APage',
  components: {
    NavBar
  }
}
</script>

<template>
  <div>
    <nav-bar/>
    <div class="content">B页面</div>
  </div>
</template>

<script>
import NavBar from './navbar'
export default {
  name: 'BPage',
  components: {
    NavBar
  }
}
</script>