vue的router-link的两种传参方式query和params的区别

首先我的页面路由配置是这样的:

方式一:

<router-link :to="{path:'./first',query:{id:666}}">第一页</router-link>

地址展示如图,参数为键值对:

获取参数的方式this.$route.query打点就可以获取参数id:

this.$route.query.id

方式二:

<router-link :to="{name:'first',params:{id:777}}">第一页</router-link>

地址展示如图,这种方式在路由地址不展示参数:

获取参数的方式this.$route.params打点就可以获取参数id

this.$route.params.id

当然,这种跳转也可以在地址栏显示参数,这时候需要配置动态路由,如图修改成这样:

这时候再次点击跳转时:

下面我们来总结一下两者的区别:

区别1：
query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
而 params相当于post请求，参数不会再地址栏中显示

区别2：
query 刷新 不会 丢失 query里面的数据
params 刷新 会 丢失 params里面的数据
query要用path来引入，params要用name来引入

希望文档能帮助到您,最后求个赞,谢谢 ^ _ ^~