How to properly use router view alongside tabs on Vue to change the url according to the active tab?

Question

Supposing I have a User View with two Cards, one that is not important to the question (UserProfilePhoto Card) and another one (UserDetails Card) with the following code:

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

What would I need to add to VTab or VTabItem that would change the url to, let's say

website.com/user/:id/tasks

Whenever the active tab is "Tasks"? And, if above URL was sent to somebody it'd load the User view with the tab on the User Details Card with "Tasks" as the selected, instead of the default "Profile".

Answer 1

Well, you see, I have a similar code in which when the variable that controls the active tab is changed between tabs I put it in the watch: de vue method

Documentation of the watch de vue method https://es.vuejs.org/v2/guide/computed.html

which you can make it change with an if according to the variable and also change the url

example:

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