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

Question

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

Answer 1

您可以将一个方法附加到@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 })
  }
}