监听页面,反应对象样式

Posted 2020-12-21 chunying

<div
        link="/home"
        class="home"
        @click="homeLink"
        :class="{ activeClass: homeIndex }"
      >
        首页
      </div>
      <div
        link="/category"
        class="category"
        @click="catLink"
        :class="{ activeClass: categoryIndex }"
      >
        全部商品
      </div>

data() {
    return {
      homeIndex: false,
      categoryIndex: false,
      search: "", // 搜索条件
    };
  },
  watch: {
    $route(to, from) {
      if (to.path == "/home") {
        this.homeIndex = true;
        this.categoryIndex = false;
      } else if (to.path == "/category") {
        this.categoryIndex = true;
        this.homeIndex = false;
      } else {
        this.homeIndex = false;
        this.categoryIndex = false;
      }
    },
  },

.nav-control .tabControl .activeClass {
  color: red;
  border-bottom: 1px red solid;
}