前言
vue路由传参有两种类型，query，params，这篇文章梳理一下。
一、query
1 传参
1.1 声明式
<router-link :to="{ path:"/userInfo"},query:{ id:id }"></router-link>
// 或者
<router-link :to="{ name:"userInfo"},query:{ id:id }"></router-link>
1.2 编程式
data(){
return {
id:"banana"
}
},
methods:{
clickFunction(){
this.$router.push({
path:"/userInfo",
query:{
id:this.id
}
})
// 或者
this.$router.push({
name:"userInfo",
query:{
id:this.id
}
})
}
}
2 取值
created(){
this.$route.query.id
}
二、params
1 传参
1.1 声明式
<router-link :to="{ name:"userInfo", params:{ id:id }}"></router-link>
1.2 编程式
data(){
return {
id:"banana"
}
},
methods:{
clickFunction(){
this.$router.push({
name:"userInfo",
params:{
id:this.id
}
})
}
}
2 取值
created(){
this.$route.params.id
}
三、区别
-
query类似于get请求，参数会暴露在url地址栏中(问号+键值对) -
query可以配合name与path使用。 -
params类似于post请求，不会暴露在url上，刷新页面会丢失传递的参数。 -
params只能配合name使用，如果提供了path,params会失效。
params想要实现刷新页面不影响传参，需要在路由里修改路径
冒号+字段::id的格式
var routes = [
{
name:"userInfo",
path:"/userInfo/:id",
}
]
