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

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

ruisui883个月前 (01-12)技术分析20

路由的参数传递:

①通过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学习笔记之动态路由的参数传递应用及技巧” 的相关文章

厅监控结算中心加强高速公路联网收费系统运行管理

厅监控结算中心加强高速公路联网收费系统运行管理,一是严格PSAM卡管理要求,加强跟踪各营运公司PSAM卡使用情况,切实做到PSAM卡专人保管,定期核查,做好联网收费系统基础安全工作。二是督促各营运公司加强3G备份链路管理,保障数据应急通道的畅通,确保车道数据正常传输。三是落实标识站建设工作,督促各营...

Deepin Linux正式引入AI功能,成为第一个正式加入AI潮流的Linux发行版

Deepin Linux是一个基于Debian的Linux发行版,以美观和实用性而闻名。现在为了达到人工智能发展趋势的前沿,Deepin Linux的开发人员宣布,他们已经开始将AI功能集成到桌面环境及其随附的应用程序中。AI集成包含了两种风格——AI驱动的图像编辑插件和AI编码助手。其中图像编辑插...

总结了Vue3的七种组件通信方式,别再说不会组件通信了

写在前面本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述。本篇文章将介绍如下七种组件通信方式:propsemitv-modelrefsprovide/injecteventBusv...

如何在GitLab上回退指定版本的代码?GitLab回退指定版本问题分析

在Git中,回退到指定版本并不是删除或撤销之前的提交,而是创建一个新的提交,该提交包含指定版本的内容。这意味着您需要将当前代码更改与指定版本之间的差异进行比较,并将其合并到一个新的提交中。如果您没有更新本地代码,并且您希望将 GitLab 仓库回退到指定版本,您可以使用以下命令:git fetchg...

Java教程:gitlab-使用入门

1 导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作GitLab简介GitLab环境搭建GitLab基本使用(组、权限、用户、项目)2 GitLab简介GitLab是整个DevOps生命周期...

博信股份新战略后再推新品 TOPPERS E2耳机售价199元

中新网6月21日电 20日,博信股份在北京正式推出新品TOPPERS主动降噪耳机E2,这是博信股份继2月战略暨新品发布会后的第二次新品亮相。价格方面,TOPPERS主动降噪耳机E2零售价199元,并于6月20日下午4点在京东商城公开销售。据介绍,TOPPERS主动降噪耳机E2采用AMS(奥地利微电子...