VUE路由传参方式
第一种:用query传参
HTML方式:
<template>
<div class="demo">
<router-link :to="{ path:"/userInfo"},query:{ id:id }"></router-link>
<!-- 或者 -->
<router-link :to="{ name:"userInfo"},query:{ id:id }"></router-link>
</div>
</template>
JS方式:
methods: {
gotoPath(){
this.$router.push({
path:"/userInfo",
query:{
id:this.id
}
})
// 或者
this.$router.push({
name:"userInfo",
query:{
id:this.id
}
})
}
}
取值:
created(){
this.$route.query.id
},
第二种:用params传参
HTML方式:
<template>
<div class="demo">
<router-link :to="{ name:"userInfo", params:{ id:id }}"></router-link>
</div>
</template>
JS方式:
methods: {
gotoPath(){
this.$router.push({
name:"userInfo",
params:{
id:this.id
}
})
}
}
取值:
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",
}
]