Be careful : Programming navigation （push|replace） There will be exceptions to this situation , Declarative navigation has no such problem , Because declarative navigation has solved this problem internally .
This kind of abnormality , Without any impact on the program .
Why does this happen :
because vue-router The latest version 3.5.2, Introduced promise, When the parameter is passed many times and repeated , It throws an exception , Therefore, the above phenomenon appears ,
The first solution
// It's for push function , Pass in the corresponding successful callback and failed callback , You can catch the current error , Can solve .
this.$router.push(
{
name: "search",
// path: "/search",
params: {
keyword: this.keyword,
},
query: {
k: this.keyword.toUpperCase(),
},
},
() => {}, // Pass in the successful callback here
() => {} // Pass in the failed callback here
);
// The first solution can temporarily solve the current problem , But later push|replace There will still be a similar phenomenon , So we need to start from ‘ root ’ Cure disease ;
The second solution
// rewrite push and replace Method , In our router/index.js Next
// rewrite push and replace Method
// First the VueRouter Archetype push and replace Method to back up a copy
let originPush = VueRouter.prototype.push
let originReplace = VueRouter.prototype.replace
// rewrite
// The first parameter , Tell the original push Method where do you want to jump （ Pass those parameters ）
// The second parameter ： Successful callback
// The third parameter ： Failed callback
//call and apply The difference between
// The same thing ： Can call the function once , Can change the function this
// Difference ： When passing multiple parameters ,call Pass parameters separated by commas ,apply Pass an array
VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject)
} else {
originPush.call(this, location, () => { }, () => { })
}
}
VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve && reject) {
originReplace.call(this, location, resolve, reject)
} else {
originReplace.call(this, location, () => { }, () => { })
}
}
// In this way, the problem can be eradicated
rewrite push and replace Method , We need to understand
this Is the current component instance object , When we register a route in the entry file VueRouter When , Two properties will be added to the component instance , One $route and $router.
$router: This attribute , The property value is VueRouter An instance object of , He doesn't have push Method ,push The method is VueRouter A method on the prototype object , It is borrowed VueRouter Archetype push Method
$router It's through new VueRouter Coming out
function VueRouter(){
}
push The method is VueRouter A method on the prototype object
VueRouter.prototype.push = function({
// Functional this yes VueRouter An instance object of
})
Program navigation route to jump to the current route ( The parameters are the same ), Multiple executions will throw NavigationDuplicated Warning error ? More articles about
- Vue Programmatic navigation and routing history Pattern
Programming navigation Be careful : The official document is wrong adopt javascript Jump // First jump mode // this.$router.push({ path: 'news' }) // this.$router.pus ...
- vue Programming navigation , Named route
// Use window.location.href In the form of , be called Programming navigation Form of binding event <template> <div class="goods-item" ...
- vue Dynamic routing and value transmission get Value transmission and programmed navigation
1. Dynamic routing values 1. Configure the routing location { path: '/content/:id', component: Content }, // Dynamic routing 2. Corresponding page value transfer <router-link :to= ...
- VueRouter Climbing a pit Chapter 4 - Named route 、 Programming navigation
VueRouter When writing the sample article in the series , The project is to use vue-cli Scaffolding . The steps of project construction and project directory have written a special article : Click here to send follow-up VueRouter The examples in this series are based on the project environment . ...
- vue route - Programming navigation
Besides using <router-link> establish a Tags to define navigation links , We can also use router Instance method of , By writing code to achieve . router.push(location, onComp ...
- vue Programming navigation
vue The value transfer between components is used in the project , The function of viewing from the product page to the product details page is realized through route jump . Used this.$router.push( Programming navigation ) product On the page : Because you only need to mask the product list page to display the product details page ...
- [Vue a master hand 's first small display ]： Chapter 14 - Program navigation and implementation components and Vue Router Decoupling between
One . Preface In the study of the previous chapter , By way of example , We get it Vue Router Named route . How to use named views , And how to pass query Query parameter parameters , Or use param The way of parameter transmission realizes parameter transmission between routes ...
- 11.vue-router Programming navigation
Two ways of page navigation Declarative navigation : How to navigate by clicking on the link , It's called declarative navigation for example : Links in ordinary web pages or vue Medium Programming navigation : By calling JavaScrip Formal API How to achieve navigation , It's called programmed navigation for example : ...
- [vue] Declarative navigation and programmatic navigation
Declarative navigation and programmatic navigation Common ground : Can navigate , Can trigger routing , Realize component switching difference : It's written differently , Declarative navigation is written in the component template in , adopt router-link To trigger , Programming navigation is written in js Function , ...
- vue-router Parameter passing in && Programming navigation && pit && beforeRouteEnter
The first part : vue-router Parameter passing adopt router-link We can pass parameters to the component we are routing to , This is very important in our practical use . route : { path:"/DetailPage" ...
Random recommendation
- Record java Basic learning process
identifier ( Class name : Variable . attribute . Method name : ) form : The class name cannot start with a number , Only alphanumeric _$ form . Naming specification : Each word of the class name is capitalized (HelloWorld The law of the great hump ), Method name Property name Variable names are lowercase ...
- zabbix3.0.4 Deployment VIII （zabbix3.0.4 Wechat alarm ）
[[email protected] ~]# cat /usr/local/zabbix/share/zabbix/alertscripts/weixin.py #!/usr/bin/env python# ...
- establish DB2 Database error --SQL1052N Database path does not exist (Windows)( Reprint )
use DB2 v9.7 When creating a new database , The default path is :D:\ Set the default path “ Is written D:\XXX( This directory exists ), When creating a new one, you will be prompted as follows :SQL1052N Database path "D:\XXX" non-existent . as follows : ...
- Java Virtual machine architecture
from :http://www.cnblogs.com/java-my-life/archive/2012/08/01/2615221.html JAVA The lifecycle of virtual machines A runtime Java Virtual machine instance ...
- Vue— Component value transmission and vuex Use
One . Value transfer between parent and child components 1. The parent component passes values to the child component : The subcomponent is in props Create an attribute in , To receive the value from the parent component Register child component in parent component Add a subcomponent... To the subcomponent tag props Properties created in Assign the value that needs to be passed to the sub component to ...
- mongoDB Order to organize
Library operation Create database use [database] view the database show dbs Delete db.dropDatabase() Backup mongodump -h[host] ip -d[databasenam ...
- python The foundation IO Programming
Reading documents with open('/path/to/file', 'r') as f: print(f.read()) call read() Will read all the contents of the file at once ,read() Function can be passed in and read at most each time ...
- MVC Summary of knowledge points
One ,MVC Create controller , View 1 newly build ASP.NET MVC web Application project , stay Controllers Create a controller in the folder ,MVC 5 controller , Then turn on the controller , In the corresponding controller there will be a Action ...
- About JS The problem of closure in
all the time , I thought I understood JavaScript The concept of a closure , Until a little friend suddenly asked me this concept , I found out that I didn't know how to tell him about this concept . At that time I knew I was cheating myself , It's a fat face . the ...
- android Show TextView The reflection effect of the text
Record today TextView Reflection effect of , Display a string of text , Then show its reflection at the bottom of the text , First on the renderings : The most important thing is View in getDrawingCache() Method , This method can get cache Image in , then ...
![JS basic and frequently asked interview questions [] = =! [] result is true, [] = = [] result is false detailed explanation](/img/42/bcda46a9297a544b44fea31be3f686.png)
