How to use router-view for tabs in Vuejs?

Question

I have using vuesax [ https://github.com/lusaxweb/vuesax ] for tabs. In vs-tabs i have multiple router-view. I want call show different vue template file for respected tabs of router-view.

Here is app.vue code.

   <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>

Here is my router code [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;

My issue:

1.) same vue template is shown in all vs-tabs router-view? 2.) How to set router-link for vs-tabs?

Here is my screen shots:

Any help much appreciated pls..

ittus · Accepted Answer · 2019-07-23 06:18:27Z

2

You can use $router.push method

   <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>

Demo on codesandbox

edited Jul 23, 2019 at 6:18

answered Jul 23, 2019 at 5:26

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PvDev Over a year ago

Thanks for answering. How to set router-link for vs-tab?

ittus Over a year ago

I think you can use router-link normally. Does it work?

PvDev Over a year ago

Separate new menu creating you can check my screen shot. Two home button is created. When i click on Home tabs it should it list data tables and click on add invoice it should show card view in router-view

PvDev Over a year ago

is it possible to use router-link into vs-tab like <vs-tab label="Home" to="/home" >

PvDev Over a year ago

i want remove router-link button Home/card which is created below tabs

fred · Accepted Answer · 2020-10-20 18:47:53Z

Just FYI, you cannot use to or :to. At least not with vuesax v3. vs-tab does not appear to recognize that prop. It only works with @click.

If you want to do this with child components you can use nested routes. Here is what the nested routes would look like. From the example above, instead of using the root App.vue assume we have routed to a child component called Main.vue at url /main. Your router.js file would look like this

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

So browsing to /main redirects to /main/home url using Home tab and switching to the Add Invoice tab becomes url /main/card.

The links in the template need to reflect the above paths. So remove the / to become @click="$router.push('home') and @click="$router.push('card').

Collectives™ on Stack Overflow

How to use router-view for tabs in Vuejs?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related