我们在开发 vue 项目的时候,会经常用到路由传参。下面来说说 vue 路由传参的三种方式。
1、通过 router-link 的 to 属性进行传参
//组件中
<template>
<div>
<router-link to="{path:'/home',query:{id:id}}">首页</rpiter-link>
</div>
</template>
//路由
{
path: '/home',
name: 'Home',
component: Home,
}
//接收id通过
this.$route.query.id
2、使用 query 进行传参
//通过点击事件
<div class="index" v-for="(item,index) in ke" :key="index" @click="go(item.id)">
</div>
//在methods接收
methods:{
go(id){
this.$router.push({
path:'/home',
name:'Home',
params:{
id:id
}
})
}
}
//路由
{
path: '/home',
name: 'Home',
component: Home,
}
//接收id
<script>
export default {
data(){
return{
id:""
}
},
created(){
this.id = this.$route.query.id
}
}
</script>
3、通过 params 进行传参
//通过设置点击事件进行跳转
<div v-for="(item,index) in list" :key="index" @click="godetail(item.id)">
</div>
//在methods出发函数
methods:{
go(id){
this.$router.push({
name:'/detail',
params:{
id:id
}
})
}
}
//接收
<script>
export default {
data(){
return{
id:""
}
},
created(){
this.id = this.$route.params.id
}
}
</script>
总结、 query 和params的区别
1.query要用path来引入,params要用name来引入
2.接收参数时,分别是this.$route.query.name和this.$route.params.name
3.query更加类似于ajax中get传参,而params类似与post,前者在浏览器的地址栏中显示,params不显示
4.params传值一刷新就没了,query传值刷新还存在。