v-tabs和vue-router在Vue.js上重用组件。

Question

这是我最初的组件（称为 "Main"），它基本上显示3个由tab驱动的子组件，其中2个是相同的类型。而这一切都能正常工作。

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

然而，标签导航的一个问题是你无法获得浏览器历史记录， 所以我想用vue -router来添加这个功能。从一些谷歌，我最终与。

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

这工作很好，除了它看起来像 CustomerView组件被重复使用， 我没有得到单独的组件。我想这是预期的行为。

从我的 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 }
    },
  ]

那么，有没有什么方法可以让vue-router不重复使用一个组件？或者有什么更好的方法把vue-router导航添加到vuetify v-tabs上？

谢谢。

Answer 1

添加一个 :key 到 <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>