Vue toggles tab style

like this structure, click to switch tab style how to judge?

html:

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

data structure:

.avtive {
  background: -sharpf3f3f3;
}
Mar.02,2021

vue-router uses this.$route, for example:
< li vmurfort = "(menu,n) in menus": key= "n": class=" {'active': this.$route.path = menu.href} ">

< hr >

if you click normally, you can add a self-segment selectedMenu: "selected menu object", for example:
menus: [{title: 'Baidu', href: 'www.baidu.com'}, {title:' Baidu 2percent, href: 'www.baidu.com2'}];

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

changePath (menu) {

this.selectedMenu = menu;

}

Menu