Vue routing relative path jumpToday 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 attributeWhen the append attribute is set, the base path is added before the current (relative) path. Type: boolean Default value: false
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 methodrouter.resolve(location, current?, append?) Return value: route object
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 appendProblems encountered when practicing writing vue router dynamic routingWhen 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. You may also be interested in:
|
<<: Detailed explanation of the principles and usage of MySQL stored procedures
>>: Steps to configure IIS10 under Win10 and support debugging ASP programs
constraint Constraints ensure data integrity and ...
1. Confirm whether MySQL has been installed. You ...
Promise is a new solution for asynchronous progra...
This article mainly introduces the principle and ...
Idea imports an existing web project and publishe...
Nginx Installation CentOS 6.x yum does not have n...
<br />I have been working in front-end for s...
When using vue to develop projects, the front end...
How is the MySQL Select statement executed? I rec...
Dig Introduction: Dig is a tool that queries DNS ...
1. Query speed of two query engines (myIsam engin...
Here is a brief introduction to indexes: The purp...
The title images on Zhihu Discovery columns are g...
In Linux, the commands cat, more, and less can al...
Table of contents Preface 1. Configure gzip compr...