params传参:
this.$router.push({
name:"detail",
params:{
name:'张三',
code:1001
}
})
query传参:
this.$router.push({
path:"/detail",
query:{
name:'张三',
code:001
}
});
区别
(1)、用法上的
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name
和this.$route.params.name
。
注意接收参数的时候,已经是$route
而不是$router
了哦!!
(2)、展示上的
query更加类似于ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
(3)、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
比如:跳转/router1/:id
1.<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
2.<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>
(4)、params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失。