Vue routing relative path jump method

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.

insert image description here

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:

insert image description here

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

You may also be interested in:
  • Implementation of nested jump of vue routing view router-view
  • Solution for Vue routing this.route.push jump page not refreshing
  • Routing in Vue is not counted in history operations
  • Vue same route jump forced refresh the route component operation
  • Do you know what are the ways to jump routes in Vue?

<<:  Detailed explanation of the principles and usage of MySQL stored procedures

>>:  Steps to configure IIS10 under Win10 and support debugging ASP programs

Recommend

MySQL constraint types and examples

constraint Constraints ensure data integrity and ...

Detailed tutorial on installing mysql on centos 6.9

1. Confirm whether MySQL has been installed. You ...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

Analysis of the principle and creation method of Mysql temporary table

This article mainly introduces the principle and ...

How to install Nginx and configure multiple domain names

Nginx Installation CentOS 6.x yum does not have n...

How to design the homepage of Tudou.com

<br />I have been working in front-end for s...

How to use Dayjs to calculate common dates in Vue

When using vue to develop projects, the front end...

How MySQL Select Statement is Executed

How is the MySQL Select statement executed? I rec...

Linux Dig command usage

Dig Introduction: Dig is a tool that queries DNS ...

MySQL query optimization: a table optimization solution for 1 million data

1. Query speed of two query engines (myIsam engin...

How to add indexes to MySQL

Here is a brief introduction to indexes: The purp...

Example code for implementing transparent gradient effects with CSS

The title images on Zhihu Discovery columns are g...

Use the more, less, and cat commands in Linux to view file contents

In Linux, the commands cat, more, and less can al...

Complete steps to enable gzip compression in nginx

Table of contents Preface 1. Configure gzip compr...