router-link标签在盒子里，如果点击盒子边缘，盒子触发，router-link未触发！ 有好办法吗大家

点击标题的盒子，没有点击到router-link ，如果点击盒子边缘，没有点击到标题字routerlink标签的话，盒子切换了颜色，router-link没有触发。大家有解决办法吗？谢谢

标题导航栏的代码：

<div class="middle">
        <div
          class="tab"
          :class="tabActive == index ? 'tabActive' : 'tab'"
          v-for="(item, index) in tabBar"
          :key="index"
          @click="tabActive=index"
        >
          <router-link style="text-decoration: none;" :to="item.link">{{ item.title }}</router-link>
          
        </div>
</div>

//tabBar: [
 //       { title: "首页", link: "/home" },
//     { title: "灵活兼职", link: "/part" },
//      { title: "关于我们", link: "/about" },
//    ],

写个标题导航栏，切换路由并切换中间内容，目前只想到一种办法。还试了点击事件他还this.$router.push(item.link),但是点击两次就会报错。

没看懂啥意思，你想点击盒子的时候让router 触发吗
那把点击事件绑定在router 上不就可以了吗