vue切换tab样式

Question

像这种结构，点击切换tab样式该怎么判断？

html:

<li v-for="(menu,n) in menus" :key="n"">
  <router-link :to="menu.sub?'':menu.href" > {{menu.title}}

数据结构：

menus: [{
  title: '百度',
  href: 'www.baidu.com',
},{
  title: '开发手册',
  href: 'docs.segmentfault.com',
},{
  title: 'segmentfault',
  href: 'segmentfault.com',
  sub: [{
    title: '问答',
    href: '/questions',
    },{
    title: '专栏',
    href: '/blogs',
    },{
    title: '提问题',
    href: '/ask',
  }]
}]

css样式：

.avtive {
  background: #f3f3f3;
}

Answer 1

vue-router 用 this.$route, 比如:
<li v-for="(menu,n) in menus" :key="n"" :class="{'active': this.$route.path === menu.href}"></li>

---

如果普通点击，可以在加入一个自段 selectedMenu: “选择的menu对象”, 比如：
menus：[{title: '百度', href: 'www.baidu.com'}, {title: '百度2', href: 'www.baidu.com2'}];

<li v-for="(menu,n) in menus" :key="n"" @click="changePath(menu)" :class="{'active': this.selectedMenu.href === menu.href}"></li>

changePath(menu) {

this.selectedMenu = menu;

}