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

Question

我希望能够在用户单击 v-tab 中定义的选项卡时更新 URL。这样，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 })
  }
}

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

Vuetify: update URL when tab in v-tab is clicked

vuetify.js

vuetify-tabs