Routing in Vue (return, refresh, jump)

Vue route jump (return, refresh, jump)

this.$(-1)

Content in the original page form will be lost;

Jump n pages forward or backward, n can be positive or negative integers

this.$(-1): Back + Refresh
this.$(0): Refresh;
this.$(1): Go forward

this.$()

The content in the original page table form will be retained

this.$(): backward;
this.$(0) refresh;
this.$(1): Go forward

this.$

Jump to the specified url path and want to add a record to the history stack. Click back and return to the previous page

1. Without parameters

this.$('/home')
this.$({name:‘home'})
this.$({path:'/home'})

2. query transmission

this.$({name:‘home',query: {id:‘1'}})
this.$({path:'/home',query: {id:‘1'}})

html$
scriptthis.$

3. Params transfer parameters

this.$({name:‘home',params: {id:‘1'}}) // Only use name

Routing configuration path: "/home/:id" or path: "/home:id" ,

If you do not configure the path, you can request it for the first time, and the refresh page id will disappear.

Configure path, refresh page id will be retained

html$
scriptthis.$

4. The difference between query and params

query is similar to get. After jumping, the parameters will be spliced after the url on the page, similar to?id=1. If it is not important, you can pass it like this.
Params are similar to post. After jumping, the parameters will not be spliced after the page url, but the refresh page id will disappear. If you still use params to refresh the 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 (that is, directly replacing the current page) [A----->B------>C As a result, B is replaced by C A------>C)]

The same usage

this.$

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.