首先我的页面路由配置是这样的:
方式一:
<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来引入
希望文档能帮助到您,最后求个赞,谢谢 ^ _ ^~