当前位置:首页 > 技术分析 > 正文内容

Vue学习笔记之动态路由的参数传递应用及技巧

ruisui885个月前 (01-12)技术分析28

路由的参数传递:

①通过params的类型

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

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

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

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

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

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

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

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

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

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

<router-link v-bind:to="{path: '/profile',query: {name: 'myname', age: '16'}}" >profile</router-link>

生成的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的信息:

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

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

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/208.html

标签: vue路由传值
分享给朋友:

“Vue学习笔记之动态路由的参数传递应用及技巧” 的相关文章

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

Git 分支管理策略汇总

最近,团队新入职了一些小伙伴,在开发过程中,他们问我 Git 分支是如何管理的,以及应该怎么提交代码?我大概说了一些规则,但仔细想来,好像也并没有形成一个清晰规范的流程。所以查了一些资料,总结出下面这篇文章,一共包含四种常见的分支管理策略,分享给大家。Git flow在这种模式下,主要维护了两类分支...

掌握版本控制:Git的那些常见用法与技巧

Git作为现代开发中最常用的版本控制系统,它的普及和高效性使得程序员几乎每天都在与它打交道。无论是个人项目,还是团队协作,Git都能帮助我们追踪代码的修改历史,保证代码版本的管理井井有条,并在多人协作时有效地避免冲突。本文将分享一些常见的Git用法与技巧,帮助你更好地掌握Git的强大功能,并提升你在...

深度解析!AI智能体在To B领域应用,汽车售后服务落地全攻略

在汽车售后服务领域,AI智能体的应用正带来一场效率和专业度的革命。本文深度解析了一个AI智能体在To B领域的实际应用案例,介绍了AI智能体如何通过提升服务顾问和维修技师的专业度及维修效率,优化汽车售后服务流程。上周我分享了AI智能体+AI小程序To C的AI应用场景《1000%增长!我仅用一个小时...