VueJs-如何使用导航选项卡更改路线

Question

我有一个带有nav-tabs组件的情况，我希望当tab-content更改时，tab-list可见。

但是发生这种情况的原因是路由器在变化，但是选项卡列表不可见并且组件变得混乱。

这是我的代码

<div class="panel tab-list">
  <ul class="nav nav-tabs nav-tabs-line nav-tabs-shop-devin" role="tablist">
    <li :class="{ active : active_el == 1 }" data-wow-delay="0.14s">
      <a @click="activateOpenOrder" data-toggle="tab" aria-expanded="false">
        <feather-icon type="circle"></feather-icon>
          Open Order
       </a>
     </li>
     <li :class="{ active : active_el == 2 }" data-wow-delay="0.12s">
       <a @click="activateCompleteOrder" data-toggle="tab" aria-expanded="false">
         <feather-icon type="check-circle"></feather-icon>
           Complete Order
       </a>
     </li>
  </ul>
</div>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade" v-bind:class="{'active in': isOpenOrder}" v-if="isOpenOrder">
     <open-order></open-order>
   </div>
   <div role="tabpanel" class="tab-pane fade" v-bind:class="{'active in': isCompleteOrder}" v-if="isCompleteOrder">
     <complete-order></complete-order>
   </div>
</div>


methods: {
 activateOpenOrder() {
  this.active_el = 1
  this.isOpenOrder = true
  this.$router.replace({ path: '/sales/openorder' })
 },
 activateCompleteOrder() {
  this.active_el = 2
  this.isCompleteOrder = true
  this.$router.replace({ path: '/sales/completeorder' })
 }
}