CODEWITHSUNDEEP
vue.jstabsvue-router
Jack
Jack

Reputation: 2344

v-tabs and vue-router reuses components on Vue.js

This is my original component (called 'Main'), it basically displays 3 sub-components driven by tabs, 2 of which are the same type. And this all works fine:

<v-tabs v-model="tab">
    <v-tab key='scenario'>Scenario</v-tab>
    <v-tab key='primary'>Primary</v-tab>
    <v-tab key='spouse'>Spouse</v-tab>
</v-tabs>

<v-tabs-items>
    <v-tab-item key='scenario'>
        <ScenarioView></ScenarioView>
        </v-tab-item>
    <v-tab-item key='primary'>
        <CustomerView :isPrimary="true"></CustomerView>
    </v-tab-item>
    <v-tab-item key='spouse'>
        <CustomerView :isPrimary="false"></CustomerView>        
    </v-tab-item>
</v-tabs-items>

However, one of the problems with tab navigation is you don't get browser history, so I wanted to add that using vue-router. From some googling, I ended up with:

<v-tabs v-model="tab">
    <v-tab key='scenario' to='/main/scenario'>Scenario</tab>
    <v-tab key='primary' to='/main/primary'>Primary</v-tab>
    <v-tab key='spouse' to='/main/spouse'>Spouse</v-tab>
</v-tabs>
<router-view></router-view>

And this works fine, except that it looks like the CustomerView component is being reused, i don't get separate components. I think this is expected behavior.

The snippet from my router/index.js:

// ...
path: '/main',
name: 'Main',
component: Main,
children: [
    {
      path: 'scenario',
      component: ScenarioView
    },
    {
      path: 'primary',
      component: CustomerView,
      props: { isPrimary: true }
    },
    {
      path: 'spouse',
      component: CustomerView,
      props: { isPrimary: false }
    },
  ]

So, is there some way to NOT have vue-router reuse a component? Or is there a better way to add vue-router navigation to vuetify v-tabs?

Thx.

Upvotes: 1

Views: 329

Answers (1)

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

Add a :key to <router-view> :

<v-tabs v-model="tab">
    <v-tab key='scenario' to='/main/scenario'>Scenario</tab>
    <v-tab key='primary' to='/main/primary'>Primary</v-tab>
    <v-tab key='spouse' to='/main/spouse'>Spouse</v-tab>
</v-tabs>
<router-view :key="$route.path"></router-view>

Upvotes: 2

Related Questions