【问题标题】:How to properly use router view alongside tabs on Vue to change the url according to the active tab?如何正确使用 Vue 上的选项卡旁边的路由器视图来根据活动选项卡更改 url?
【发布时间】:2025-12-28 18:20:08
【问题描述】:

假设我有一个包含两张卡片的用户视图,一张对问题不重要(UserProfilePhoto Card),另一张(UserDetails Card),代码如下:

<VTabs>
  <VTab>
    Profile
  </VTab>
  <VTab>
    Tasks
  </VTab>
  <VTab>
    Messages
  </VTab>
  <VTabItem>
    <Profile>   // component
  </VTabItem>
  <VTabItem>
    <Tasks>    // component
  </VTabItem>
  <VTabItem>
    <Messages> // component
  </VTabItem>
</VTabs>

我需要添加什么到 VTab 或 VTabItem 来改变 url,比如说

website.com/user/:id/tasks

只要活动选项卡是“任务”?而且,如果上面的 URL 被发送给某人,它会加载用户视图,其中包含用户详细信息卡上的选项卡,其中选择了“任务”,而不是默认的“配置文件”。

【问题讨论】:

    标签: vue.js vuetify.js vue-router vuetify-tabs


    【解决方案1】:

    嗯,你看,我有一个类似的代码,当控制活动选项卡的变量在选项卡之间更改时,我将它放在手表中:de vue 方法

    watch de vue 方法的文档 https://es.vuejs.org/v2/guide/computed.html

    你可以根据变量用 if 来改变它,也可以改变 url

    示例:

    watch: {
                    tab(val) {
                       if(val==0){
                         this.url = "website.com/user/:id/tasks"
                    }else{
                         this.url = "website.com/otherURL"
                    }
              }
    
    

    【讨论】: