Do you know the ways of routing jump in vue

Directory Mode 1: router-link (declarative routing) Mode 2: router. push (programmatic routing) Mode 3: this. $router. push () (called inside function) Mode 4: this. $router. replace () (same as above, push) Reference: Summary

Mode 1: router-link (declarative routing)

1.  Without parameters 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path All right ,  Suggested use name  
//  Note: router-link If the link in the '/' Start with the root route. If you don't start with the root route, '/' Start with the current route. 
2. With parameters 
<router-link :to="{name:'home', params: {id:1}}">  
// params Transmission parameter  ( Similar post)
//  Routing configuration  path: "/home/:id"  Or  path: "/home:id" 
//  Do not configure path , No. 1 1 Sub-requestable , Refresh page id Will disappear 
//  Configure path, Refresh page id Will be retained 
// html  Take parameters   $route.params.id
// script  Take parameters   this.$route.params.id
<router-link :to="{name:'home', query: {id:1}}"> 

Mode 2: router. push (programmatic routing)

//  String 
router.push('home')
//  Object 
router.push({ path: 'home' })
//  Named route 
router.push({ name: 'user', params: { userId: '123' }})
//  With query parameters, become  /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

Note: If path is provided, params will be ignored, which is not the case for query in the above example. Instead, you need to provide the route of name or handwritten complete path with parameters, as in the following example:

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
//  Here's  params  Not effective 
router.push({ path: '/user', params: { userId }}) // -> /user

Mode 3: this. $router. push () (called inside the function)

1.   Without parameters 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
2. query Reference transmission  
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html  Take parameters   $route.query.id
// script  Take parameters   this.$route.query.id
3. params Reference transmission 
this.$router.push({name:'home',params: {id:'1'}})  //  Can only be used  name
//  Routing configuration  path: "/home/:id"  Or  path: "/home:id" ,
//  Do not configure path , No. 1 1 Sub-requestable , Refresh page id Will disappear 
//  Configure path, Refresh page id Will be retained 
// html  Take parameters   $route.params.id
// script  Take parameters   this.$route.params.id
4. query And params Difference 
query Similar  get,  Page after jumping  url Parameters will be spliced later , Similar ?id=1,  Non-important can be passed down like this ,  Passwords or the like params Refresh page id Still in 
params Similar  post,  Page after jumping  url Parameters will not be spliced later  ,  But refresh the page id  Will disappear 
** Note: To get the parameters above the route, use the $route There is no back r**

Mode 4: this. $router. replace () (Same as above, push)

Mode 5: this. $router. go (n)

this.$router.go(n)
 Jump forward or backward n Pages, n Can be a positive integer or a negative integer 
ps :  Difference 
this.$router.push
 Jump to the specified url Path, and think history Add to the stack 1 A record, clicking Back will return to 1 Pages 
this.$router.replace
 Jump to the specified url Path, but history There will be no record in the stack. Click Back to jump to the previous page  ( Is to directly replace the current page )
this.$router.go(n)
 Jump forward or backward n Pages, n Can be a positive integer or a negative integer 

params is part 1 of the route and must be. query is a parameter spliced after url, so it doesn't matter if it doesn't.
params1 is set in the route, and params is the first part of the route. If this route has params transmission parameter, but this parameter is not transmitted during jump, it will lead to jump failure or no content on the page.

params and query can be passed without setting, but when params is not set, refreshing the page or returning parameters will be lost.

Both can pass parameters. What is the difference?

path is configured for query, while name is configured for params. Configuring path in params is invalid

query does not need to set parameters in routing configuration, while params must set

Parameters passed by query are displayed in the address bar

params pass-through refresh will be invalid, but query will save the passed value and refresh unchanged

Reference:

https://www.ofstack.com/article/183611.htm

vue. js official website

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!