Vue routing relative path jump method

Vue routing relative path jump

Today I encountered multi-layer routing when writing something. A relative path is required when jumping between routes. Therefore, I checked the official website and found that the append attribute and router.resolve method were used, so I listed the specific usage methods.

1. Append attribute

When the append attribute is set, the base path is added before the current (relative) path.

Type: boolean

Default value: false

• For example, we navigate from /eth (base path) to a relative path /eth/block, /eth—>/eth/block, and the route is set to block
• If the append attribute is added, the full path is /eth/block.
• If not, the full path is /block

If the current route is /eth, jump to the child /eth/block

<router-link to="block" append> 
 /eth =====> /eth/block  
</router-link>

If the current route is /eth/login, jump to the same level /eth/block

<router-link to="../block" append>
 /eth/login =====> /eth/block 
</router-link>

If the current route is /eth/block, return to the previous level /eth

<router-link to="../" append>
 /eth/block =====> /eth 
</router-link>

2.router.resolve method

router.resolve(location, current?, append?)

Return value: route object

• The resolved target location (same format as <router-link>'s to prop).
• current is the current default route (usually you don't need to change it)
• append allows you to append paths to the current route (similar to router-link)

export default {
  mounted() {
    //Get the route object to be redirected let routeObj = this.$router.resolve({
        path: '../'
      },
      this.$route,
      "append"
    );
    //Print and view the route object console.log(routeObj);
    //Route jump this.$router.push({
      path: routeObj.route.path,
      query: { //Pass parameter id in this way: this.id 
   }
    });
  }
}

Vue router dynamic routing click jump path address repeated append

Problems encountered when practicing writing vue router dynamic routing

When clicking multiple times, the address bar keeps adding duplicates.

After checking the code, I found that the relative path in the page was missing a '/' at the beginning; adding it will display normally.

as follows:

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.