layer.open传递对象参数_Vue学习笔记之动态路由的参数传递应用及技巧

路由的参数传递:

①通过params的类型

· 配置路由格式:/router/:id

· 传递的方式:在path后面跟上对应的值

· 传递后形成的路径:/router/list,/router/profile

这个就是前两篇中提到的"动态路由"中有应用过这个方法:

0174699ee68fe10a31e6051e6b169b2c.png

②通过query的类型(对象方式):

· 配置路由格式:/router,也就是普通的配置方式配置路由即可

· 传递的方式:对象中使用query的key作为传递方式

· 传递后形成的路径:/router?id=list,/router?id=profile

正常配置路由的内容就不再重复了,在界面显示的地方需要通过一个对象来实现:

c8d0267e59aaf6f8df978fca7a84e30b.png

然后对象里面通过query来进行参数的传递:

profile

6be6bdb031ebf30beb6f08282b7a5203.png

生成的URL地址为:http://localhost:8080/profile?name=myname&age=16

PS:注意to前面要通过v-bind来绑定变量;

query里面也是一个对象,通过给对象里面的key赋值;

URL的组成: 协议://主机:端口/路径?查询(query) #片段

scheme://host:port/path?query#fragment

最后通过$route.query在界面上打印出query的信息:

8c795debb26223754313350a2e322b83.png

同时,我们也可以通过代码来实现页面的跳转及参数的传递:

cc00569fb03ee01f37a7a81c351f2ccc.png

然后通过实现点击动作完成对应组件的切换:

35eb77ffb825bc9b6552543ac8eb15bf.png

PS:replace里面的参数根据配置可以直接拼接为路径,如上图中的User的URL路径;也可以是对象,如上图中的profile的URL中赋值的是一个对象。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值