vue中route属性的query和params传参

query的使用

一、产生跳转的位置
1.按钮跳转，在标签中配置如下

<router-link :to="{name:'personDetail',query:{id:123,name:'李磊'}}">查看详情</router-link>

2.js部分操作跳转

this.$router.push({ name: "personDetail", query: { id: 123,name:'李磊' } });

二、在路由规则中配置（导航）

{name:'personDetail',path:'/personDetail',component:PersonDetail}

三、跳转终页面获取参数

this.$route //全部内容（object）

this.$route.query.id //参数

查看在url中的路径

http://localhost:8080/personDetail?id=123&name=李磊

params的使用
一、产生跳转的位置
1.按钮跳转，在标签中配置如下

<router-link :to="{name:'personDetail',params:{id:123,name:'李磊'}}">查看详情</router-link>

2.js部分操作跳转

this.$router.push({ name: "personDetail", params: { id: 123,name:'李磊' } });

二、在路由规则中配置（导航）

{name:'personDetail',path:'/personDetail/:id/:name',component:PersonDetail}

三、跳转终页面获取参数

this.$route //全部内容（object）

this.$route.params.id //参数

查看在url中的路径

http://localhost:8080/personDetail/123/李磊