Question

当用户单击v-tab中定义的选项卡时，我希望能够更新URL。这样，可以共享URL。当另一个用户使用该共享URL时，他们应该能够以URL中定义的相同标签开始。这可能吗？

Answer 1

您可以仅将方法附加到tab元素的@click事件，这将更改单击时的路由。

如果您想在页面加载时自动更改选定的标签，则可以获取当前路径，只需在mounted()钩子中设置标签即可：

<v-tabs
  v-model="selectedTab"
>
  <v-tab
    v-for="tab in tabs"
    @click="updateRoute(tab.route)
  >
  ...

data () {
  return {
    selectedTab: 0,
    tabs: [
      {
        name: 'tab1',
        route: 'route1'
      },
      {
        name: 'tab1',
        route: 'route1'
      }
    ]
  }
},
mounted() {
  // Get current route name
  // Find the tab with the same route (property value) 
  // Set that tab as 'selectedTab'
  const tabIndex = this.tabs.findIndex(tab => tab.route === this.$route.name)
  this.selectedTab = tabIndex
},
methods: {
  updateRoute (route) {
    this.$router.push({ path: route })
  }
}

Vuetify：单击v-tab中的选项卡时更新URL

1 个答案: