Vue3中query和params区别

一、首先介绍query和params的区别

• query可以用name或path传参 
• params只能用name传参

-（params的push里面只能是name，例如name:'login'就是可以的， 如果是path:'/login'就不行哦）

二、那么在实际中该怎么用呢？

例如Router路由中这样编写：

routers:[

        {

              path:'/push/:count?',

              name:'push',

              component:()=>import('../views/PushView.vue')

        }]

那么用query的话就可以这样写:

<router-link  :to="{name:'push',query:{ count11:6 }}">query参数</router-link>

<h3>query:{{ $route.query.count11}}</h3>

params:

<router-link  :to="{name:'push',params:{ count:5 }}">数量为5</router-link>

<h3>数量:{{ $route.params.count }}</h3>

最终运行结果的对比:

query传参(类似于 ajax中的get传参):

params传参(类似于ajax中的post传参):

通过对比可以发现，前者query在浏览器中显示参数，而params则不显示参数。