The first method: router-link (declarative routing)
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.With parameters
<router-link :to="{name:'home', params: {id:1}}">
// Params pass parameters (similar to post)//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 take parameter this.$<router-link :to="{name:'home', query: {id:1}}">
The second method: (programmed routing)
// String('home')
// Object({ path: 'home' })
// Named routes({ name: 'user', params: { userId: '123' }})
// With query parameters, become /register?plan=private({ path: 'register', query: { plan: 'private' }})
Note: If path is provided, params will be ignored, and the query in the above example does not belong to this situation. Instead, you need to provide the route name or handwritten path with parameters as follows:
const userId = '123'
({ name: 'user', params: { userId }}) // -> /user/123
({ path: `/user/${userId}` }) // -> /user/123
// The params here do not take effect({ path: '/user', params: { userId }}) // -> /user
The third method: this.$() (called in the function)
1. Without parameters
this.$('/home')
this.$({name:'home'})
this.$({path:'/home'})
2. queryTransfer the ginseng
this.$({name:'home',query: {id:'1'}})
this.$({path:'/home',query: {id:'1'}})
// html parameter $// script take parameter this.$3. paramsTransfer the ginseng
this.$({name:'home',params: {id:'1'}}) // 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 take parameter this.$4. queryandparamsthe difference
querysimilar get, Page after jump urlThe parameters will be spliced later,similar?id=1, Non-important can be passed on like this, Password or somethingparamsRefresh the pageidStill here
paramssimilar post, Page after jump urlThe parameters will not be spliced later , 但是Refresh the pageid Will disappear
**Notice：Get the parameters above the route，Used$route，No laterr**
The fourth method: this.$() (usage is the same as above, push)
The fifth method: this.$(n)
this.$(n) Jump forward or backwardnPages，nCan be positive or negative integer ps : the difference this.$ Jump to specifiedurlpath，And thinkhistoryAdd a record to the stack，点击后退会返回到上一Pages this.$ Jump to specifiedurlpath，buthistoryThere will be no records in the stack，点击返回会跳转到上上Pages (Just replace the current page directly) this.$(n) Jump forward or backwardnPages，nCan be positive or negative integer
Params are part of the route and must be there. query is a parameter spliced after the url, and it doesn't matter if it doesn't.
Once params are set on the route, params is part of the route. If this route has params transmission parameters, but this parameter is not transmitted during the jump, it will cause the jump to fail or the page will have no content.
Params and query can also be passed parameters without setting, but when params are not set, refreshing the page or returning parameters will be lost.
Both can pass parameters, what is the difference?
query parameter configuration is path, while params parameter configuration is name, and path configuration in params is invalid
query does not need to set parameters in routing configuration, but params must be set.
The parameters passed by query will be displayed in the address bar
The refresh of params parameter will be invalid, but query will save the passed value and the refresh will remain unchanged.
refer to:
https:///article/
Official website
Summarize
That’s all for this article. I hope it can help you and I hope you can pay more attention to more of my content!