Detailed vue routing jump in four ways (parameters): https://www.jb51.net/article/160401.htm
1. router-link
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
1. 不带参数
<router-link :to=
"{name:'home'}"
>
<router-link :to=
"{path:'/home'}"
>
//name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
2.带参数
<router-link :to=
"{name:'home', params: {id:1}}"
>
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
<router-link :to=
"{name:'home', query: {id:1}}"
>
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
|
2. this. $ Router.push () (function call inside)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
1. 不带参数
this
.$router.push(
'/home'
)
this
.$router.push({name:
'home'
})
this
.$router.push({path:
'/home'
})
2. query传参
this
.$router.push({name:
'home'
,query: {id:
'1'
}})
this
.$router.push({path:
'/home'
,query: {id:
'1'
}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this
.$router.push({name:
'home'
,params: {id:
'1'
}})
// 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
|
3. this. $ Router.replace () (use ibid, push)
4. this.$router.go(n) ()
this.$router.go(n)
Skip forward or backward n pages, n can be positive or negative integers
ps: the difference
this.$router.push
Jump to url path and would like to add a record in the history stack, click the back will return to the previous page
this.$router.replace
Jump to url path, but there will be no record history stack, click Back will jump to the last page (that is a direct replacement for the current page)
this.$router.go(n)
Skip forward or backward n pages, n can be positive or negative integers
to sum up
These are the small series to introduce Detailed vue routing jump in four ways (with parameters), we want to help someone if you doubt welcome to give me a message, Xiao Bian will promptly reply to everyone!