Vue中路由传参
按大类有两种传递方式,分别是params和query。
其中params又分为两种,即在url中显示参数和不显示参数。
1、params传参,显示参数:
这种情况属于动态路由,需要提前在路由中配置好,
如:{path:“user/:id”,component:user},
如id为12345,这时导航栏中的url会显示/user/12345,在页面中获取多传id的方式为this.
r
o
u
t
e
.
p
a
r
a
m
s
.
i
d
;
这
种
传
参
方
式
实
际
上
是
r
e
s
u
l
t
f
u
l
风
格
的
传
递
方
式
。
2
、
u
r
l
传
参
,
不
显
示
参
数
如
:
t
h
i
s
.
route.params.id;这种传参方式实际上是resultful风格的传递方式。 2、url传参,不显示参数 如: this.
route.params.id;这种传参方式实际上是resultful风格的传递方式。2、url传参,不显示参数如:this.router.push{name:“user”,params:{id:12345}
需要注意一点,这里只能用name而不能用path
这时在路由导航中url只显示位/user,并不会显示后边的参数12345。在页面中获取id的方式同上。
3、query、显示参数
如:
this.
r
o
u
t
e
人
.
p
u
s
h
(
n
a
m
e
:
“
u
s
e
r
”
,
q
u
e
r
y
:
{
i
d
:
12345
}
,
∗
注
意
这
里
n
a
m
e
也
可
以
用
p
a
t
h
定
位
到
组
件
,
但
建
议
统
一
使
用
n
a
m
e
∗
在
页
面
上
获
取
i
d
的
方
式
为
t
h
i
s
.
route人.push(name:“user”,query:{id:12345}, *注意这里name也可以用path定位到组件,但建议统一使用name* 在页面上获取id的方式为this.
route人.push(name:“user”,query:{id:12345},∗注意这里name也可以用path定位到组件,但建议统一使用name∗在页面上获取id的方式为this.router.query,这时在路由导航中url会显示为/user?id=12345
上面就是路由传参的几种方式,这里再补充一点关于url的组成:
协议+hostname+端口号(默认8080一般省略)+path+query查询(格式为:?key=value)