路由中的query 和 params的传参方式区别和详解

  • Post author:
  • Post category:其他




1 Vue router如何传参

params、query是什么?

params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params

query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。





2 注意 $ route和$router的区别:



需要注意的是:传参是this. $ router ,而接收参数是this.$route,千万要小心哟!!!


$route是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法,钩子函数等。



3关于路由传参的区别:


1:query方式传参和接收参数:

传参: 
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
      })
 
接收参数:
this.$route.query.id


2:params方式传参和接收参数:

传参: 
this.$router.push({
        name:'xxx'
        params:{
          id:id
        }
      })
 
接收参数:
this.$route.params.id


注意:params传参只能以name来引导路由,并且push里面只能以name:‘xxx’的形式,不能是path:’/xxx’,如果混用,接收页面会显示undefined!!!



4params传参和query传参有什么区别:

(1)、用法上的

刚query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.



r

o

u

t

e

.

q

u

e

r

y

.

n

a

m

e

t

h

i

s

.

route.query.name和this.






r


o


u


t


e


.


q


u


e


r


y


.


n


a


m


e





t


h


i


s


.





route.params.name。

注意接收参数的时候,已经是



r

o

u

t

e

route而不是






r


o


u


t


e














router了哦!!

(2)、展示上的

query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:

在这里插入图片描述

params:
在这里插入图片描述

(3)、params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。

params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。

比如:跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>
<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

(4)、params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失,这一点的在上面说过了



版权声明:本文为qq_45716607原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。