There are several different methods for vue jumping pages. The following will introduce them to you through the example code, which has certain reference value for your study or work. Friends who need it can refer to it.
1: router-link jump
1.Without parameters
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //Name and path are fine, it is recommended to use name// Note: If the link in router-link starts with the root route; if it does not have '/', it starts with the current route.
2.bringparamsparameter
<router-link :to="{name:'home', params: {id:123456}}">
// Params pass parameters (similar to post)//Routing configuration path: "/home/:id" or path: "/home:id"// If you do not configure path, the first time you can request it, the refresh page id will disappear; if you configure path, the refresh page id will be retained.// html parameter $ script parameter this.$
3.bringqueryparameter
<router-link :to="{name:'home', query: {id:123456}}">
// Pass the parameters in query (similar to get, the parameters will be displayed after url)// The routing can be configured// html Take ginseng $ script Take ginseng this.$2：this.$()
1. Without parameters
this.$('/home')
this.$({name:'home'})
this.$({path:'/home'})
2. queryTransfer the ginseng
this.$({name:'home',query: {id:'123456'}})
this.$({path:'/home',query: {id:'123456'}})
// html parameter $ script parameter this.$
3. paramsTransfer the ginseng
this.$({name:'home',params: {id:'123456'}}) // Only use name//Routing configuration path: "/home/:id" or path: "/home:id" ,// If you do not configure path, you can request it for the first time, and the refresh page id will disappear// Configure path, refresh the page id will be retained// html parameter $ script parameter this.$
4. queryandparamsthe difference
querysimilarget, Page after jumpurlThe parameters will be spliced later,similar?id=123456, Non-important can be passed on like this, Password or somethingparamsRefresh the pageidStill here
paramssimilarpost, Page after jumpurlThe parameters will not be spliced later, 但是Refresh the pageidWill disappear。
3. this.$()
The usage is the same as above, and the same as the second method.
4. this.$(n)
<button @click="upPage">[Previous page]</button>
<button @click="downPage">[Next page]</button>
upPage() {
this.$(-1); // A step back record is equivalent to ()},
downPage() {
this.$(1); // Going forward in browser records is equivalent to ()}
Jump n pages forward or backward, n can be positive or negative integers
ps: Difference
this.$
Jump to the specified url path and add a record to the history stack. Click Back to return to the previous page.
this.$
Jump to the specified url path, but there will be no records in the history stack. Clicking back will jump to the previous page (switching the current page directly).
this.$(n)
Jump n pages forward or backward, n can be positive or negative integers.
Summarize
This is the article about the four commonly used methods and differences in vue jump pages. For more related vue jump page methods, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!