Question

我在标签页上使用了vuesax [https://github.com/lusaxweb/vuesax]。在vs选项卡中，我有多个路由器视图。我想为路由器视图的受关注标签显示不同的vue模板文件。

这是app.vue代码。

   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;

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

{{1}}

我的问题：

1。）在所有vs-tabs路由器视图中都显示相同的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上的演示

Answer 2

仅供参考，您不能使用to或:to。至少不是vuesax v3。 vs-tab似乎无法识别该道具。仅适用于@click。

如果要对子组件执行此操作，则可以使用嵌套路由。这是嵌套路线的样子。在上面的示例中，假设我们已路由到URL App.vue上名为Main.vue的子组件，而不是使用根/main。您的router.js文件看起来像这样

{
    path: '/main',
    component: Main,
    children: [
        {
        path: '',
        redirect: 'home'
        },
        {
        path: 'home',
        component Home
        },
        {
        path: 'card',
        component: Card
        }
    ]
}

因此，使用/main标签浏览到/main/home会重定向到Home网址，并切换到Add Invoice标签会变成网址/main/card。

模板中的链接需要反映上述路径。因此，删除/成为@click="$router.push('home')和@click="$router.push('card')。

如何在Vuejs中将router-view用于选项卡？

2 个答案: