html - 如何在 Vuejs 中使用路由 View 作为选项卡？

Question

我使用了 vuesax [ https://github.com/lusaxweb/vuesax ] 用于选项卡。在 vs-tabs 中我有多个路由器 View 。我想为路由器 View 的相关选项卡调用显示不同的 vue 模板文件。

这是app.vue代码。

   <template>
   <div id="app">
  <div class="">
   <h3 style="color: #0DB26B;">
    home <mark class="red">New</mark> Design
  </h3>
<vs-tabs  :color="colorx" alignment="fixed" >
  <vs-tab label="Home" >
    <router-link
            tag="button" class="btn btn-link" to="/home">Home
          </router-link>
    <div class="con-tab-ejemplo">
      <router-view></router-view>
    </div>
  </vs-tab>
  <vs-tab label="Add Invoice" >
  <router-link
            tag="button" class="btn btn-link" to="/card">Card
          </router-link>
    <div class="con-tab-ejemplo">
      <router-view></router-view>

    </div>
  </vs-tab>
  <vs-tab label="Profile">
    <div class="con-tab-ejemplo">
      <router-view></router-view>

       </div>
      </vs-tab>
      </vs-tabs>
    </div>

  </div>
 </template>

这是我的路由器代码 [index.js]:

   import Vue from 'vue'
   import Router from 'vue-router';
   import Home from '@/components/Home';

   import Card from '@/components/Card';


   Vue.use(Router);

   let router = new Router({


   routes: [
    {
        path: '/home',
        name:"Home",
        component: Home,

    },
    {
        path: '/card',
        name:"Card",
        component: Card,

         },

      ]


   });
  export default router;

我的问题:

1.) 所有 vs-tabs 路由器 View 中都显示相同的 vue 模板？ 2.) 如何为 vs-tabs 设置 router-link？

这是我的屏幕截图:

非常感谢任何帮助..

Answer 1

您可以使用$router.push方法

   <div>
      <vs-tabs color="success" alignment="fixed">
        <vs-tab label="Home" @click="$router.push('/home')">
          <div class="con-tab-ejemplo">
            <router-view></router-view>
          </div>
        </vs-tab>
        <vs-tab label="Add Invoice" @click="$router.push('/card')">
          <div class="con-tab-ejemplo">
            <router-view></router-view>
          </div>
        </vs-tab>
        <vs-tab label="Profile"></vs-tab>
      </vs-tabs>
    </div>

演示 codesandbox