Do you know the ways of routing jump in vue
- 2021-12-05 05:38:58
- OfStack
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!