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

Introduction to who command examples in Linux

About who Displays users logged into the system. ...

How to set background blur with CSS

When making some pages, in order to make the page...

MySQL database monitoring software lepus usage problems and solutions

When using lepus3.7 to monitor the MySQL database...

How to deploy MongoDB container with Docker

Table of contents What is Docker deploy 1. Pull t...

The pitfalls and solutions caused by the default value of sql_mode in MySQL 5.7

During normal project development, if the MySQL v...

Process parsing of reserved word instructions in Dockerfile

Table of contents 1. What is Dockerfile? 2. Analy...

Methods and steps to upgrade MySql5.x to MySql8.x

Several Differences Between MySQL 5.x and MySQL 8...

Detailed explanation of map overlay in openlayers6

1. Overlay Overview Overlay means covering, as th...

How to add fields to a large data table in MySQL

Preface I believe everyone is familiar with addin...

centos7.2 offline installation mysql5.7.18.tar.gz

Because of network isolation, MySQL cannot be ins...

Linux system calls for operating files

Table of contents 1. Open the file Parameter Intr...

How to deploy FastDFS in Docker

Install fastdfs on Docker Mount directory -v /e/f...

How to use async and await in JS

Table of contents 1. async 2. await: 3. Comprehen...

Security configuration and detection of SSL after the website enables https

It is standard for websites to enable SSL nowaday...

WeChat Mini Program QR Code Generation Tool weapp-qrcode Detailed Explanation

WeChat Mini Program - QR Code Generator Download:...