gcb_zc/components/table.vue

<template>
  <div class="table" v-if="selected.length>0">
    <ul @click="addTodo">
      <nuxt-link to="/">
        <li :class="selected[0]">
          <span>招投标</span>
        </li>
      </nuxt-link>
      <nuxt-link to="/project">
        <li :class="selected[1]">
          <span>工程项目</span>
        </li>
      </nuxt-link>
      <nuxt-link to="/map">
        <li :class="selected[2]">
          <span>项目跟踪</span>
        </li>
      </nuxt-link>
      <nuxt-link to="/me">
        <li :class="selected[3]">
          <span>我的</span>
        </li>
      </nuxt-link>
    </ul>
  </div>
</template>
<script>
import '~/assets/a.scss'
export default {
  data() {
    return {
      selected: ['selected']
    }
  },
  created: function() {
    this.addTodo()
  },
  methods: {
    addTodo(e) {
      const selected = []
      if (this.$route.path == '/') {
        selected[0] = 'selected'
      } else if (this.$route.path == '/project') {
        selected[1] = 'selected'
      } else if (this.$route.path == '/map') {
        selected[2] = 'selected'
      } else if (this.$route.path == '/me') {
        selected[3] = 'selected'
      }
      this.selected = selected
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        this.addTodo()
      },
      // 深度观察监听
      deep: true
    }
  }
}
</script>