vue+ts 如何菜单点击赋予菜单样式？

Question

项目时vue+TS，因为第一次使用，在添加菜单样式的时候出现了问题，我想的是点击菜单，赋予样式，利用添加类的方式实现,部分代码如下：

html

<ul>
  <li
    v-for="(nav, index) in list"
    :key="index"
    :class="index == activemenu ? 'active' : ''"
    @click="changeMenu(index)"
  >
    <router-link :to="nav.path">
      {{ nav.name + activemenu }}
      <i v-if="index === 5">+</i>
    </router-link>
  </li>
</ul>

JS

export default class Nav extends Vue {
  private title = "主页";
  private isMobile: boolean = isMobileOrPc();
  public activemenu = 0;
  private list: Array<NavListItem> = [
    {
      index: "0",
      path: "/",
      name: "主页"
    },
    {
      index: "1",
      path: "/services",
      name: "我们的服务",
      children: [
        {
          index: "0",
          path: "facility",
          name: "智慧设施管理"
        },
        ...//限于篇幅不粘贴
      ]
    },
    {
      index: "2",
      path: "/products",
      name: "产品介绍"
    },
   ...//限于篇幅不粘贴
  ];
  private changeMenu(index: number): void {
    this.activemenu = index;
    console.log("index: ", this.activemenu);
    //this.list.push({ index: "3", path: "x", name: "x" });
    // this.list.pop();
    // this.list.forEach(item => {
    //   if (item.index === index.toString()) item.class = "active";
    //   else item.class = "";
    // });
    console.log(this.list);
  }
  mounted() {
    console.log(this.$route);
  }
  // @Watch("$route")
  // routeChange(val: Route, oldVal: Route): void {
  //   console.log(this.activemenu + "---");
  //   for (let r = 0; r < this.list.length; r++) {
  //     const l: NavListItem = this.list[r];
  //     if (l.path === val.path) {
  //       this.activemenu = l.index;
  //       this.title = l.name;
  //       document.getElementsByTagName("title")[0].innerText = this.title;
  //       break;
  //     }
  //   }
  // }
}

之前是准备用watch监听路由实现（注释部分），兼听不到变化，
但是每个路由都没有子路由，也试过用keep-alive包裹router-view均检测不到变化

后面尝试利用点击事件动态添加类，但是添加失败（v-for没有重新渲染），具体什么问题我也不知道了，谢谢各位能指点迷津！

Answer 1

搞个组件库吧，都有类似 navigation 之类的组件，比自己写简单多了。

Answer 2

谢谢Lyde_Su的回答，因为这点击菜单赋予样式并不难，我认为没必要搞个组件。昨天我发现了问题，参考官网: vue-property-decorator，需要加@Component

import { Vue, Component, PropSync } from 'vue-property-decorator'

@Component // 这一句话我少加了，导致监听路由和计算属性都无法生效，
export default class YourComponent extends Vue {
  @PropSync('name', { type: String }) syncedName!: string
}

最后：

<li
            v-for="(nav, index) in list"
            :key="index"
            :class="index == activemenu ? 'active' : ''"
          >
            <router-link :to="nav.path">
              {{ nav.name }}
              <i v-if="index === 5">+</i>
            </router-link>
</li>

其他无关的去掉，使用监听路由实现（其实不用这么复杂，因为我想点菜单改一下title）

@Watch("$route")
  routeChange(val: Route, oldVal: Route): void {
    for (let r = 0; r < this.list.length; r++) {
      const l: NavListItem = this.list[r];
      if (l.path === val.path) {
        this.activemenu = l.index;
        this.title = l.name;
        document.getElementsByTagName("title")[0].innerText = this.title;
        break;
      }
    }
  }