vue.js - 如何正确使用 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"
                }
          }