一、query传递参数
query传参可以认为是get传参,参数会在请求的url中显示出来,以?,&连接。**
第1种:
单个的参数可以写在请求的url中,直接以?连接即可,比如:
<router-link to='/gameInfo?uid='+uid >
获取:用query获取
this.$route.query.uid
第2种:
多个参数的情况下也可以使用对象的形式,跳转通过匹配router的path去相应的组件,比如:
this.$router.push({
path:'/gameInfo',
query:{
uId:123,
gameId:3
}
})
// 路由配置文件中
{
path:'/gameInfo',
name:gameInfo,
component:()=>import('./views/gameInfo')
}
获取:依然是用query 去获取相应的参数
this.$route.query.uId
this.$route.query.gameId
第3种:
直接在路径后面拼接参数
this.$router.push('路径?参数名=参数值')
获取:依然是用query 去获取相应的参数
this.$route.query.参数名
二 、params传参
params传参可以认为是post的方法,这种传参方法是看不到参数的,获取的时候通过params来获取。
通过name来匹配相应的组件。
(重点: 通过name 来匹配 组件的)
第1种:
<router link :to='/gameInfo/'+uid+"/"+gameid >
//路由配置文件:
{ name:gameInfo,
path:'/gameInfo/':uid/:gameid
component:()=>import('./views/gameInfo')
}
这样在url中传入一个参数,这个参数可以是data中的一个数据,也可以是一个动态的参数,在gameInfo页面接收参数的时候用params接收,比如:
获取:使用params获取
this.$route.params.uid 这里的uid是路由中:后边的参数
第2种:
push跳转路由,传入对象时,用下面的方法传参:
this.$router.push({
name:'gameInfo', // 这就是前面说到使用的是 name 进行组件的匹配
params:{
gameId:3,
userId:2
}
})
//路由中的配置:
{
path:'gameInfo',
name:gameInfo,
component:()=>import('./views/gameInfo')
}
获取:使用params获取
this.$route.params.gameId
this.$router.params.userId
还可以按照: 声明式导航 router-link 和 编程式导航 this.$router.push() 来进行分类;
我是按照 query 和 params 来进行分类的,这样我个人看着比较清晰,依据个人喜好而定;
本博客参考以下而做出的总结:
作者:Free_syx 链接:https://www.jianshu.com/p/c63372225cc8