如何正确使用 Vue 上的选项卡旁边的路由器视图来根据活动选项卡更改 url？

Question

假设我有一个包含两张卡片的用户视图，一张对问题不重要（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 被发送给某人，它会加载用户视图，其中包含用户详细信息卡上的选项卡，其中选择了“任务”，而不是默认的“配置文件”。

Answer 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"
                }
          }