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

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

ruisui884个月前 (01-12)技术分析21

路由的参数传递:

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

宽带客户收费管理系统--维修版

宽带客户收费管理系统--维修版headerfooter《宽带客户收费管理系统——维修版》是一款适合宽带运营商使用的管理系统。软件主要包括以下功能:1.主要功能包括用户开户、收费录入、工单登记、故障处理;2.自定义套餐及收费功能;3.强大的查询功能和数据备份功能以及严密的用户权限功能;4.界面设计简洁...

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、computed 等需要先引入才能使用,但是本篇文章介绍的 defineProps、withDefaul...

Gitlab+Jenkins通过钩子实现自动部署web项目,图文详细教程

扩展参考:Jenkins+Gitlab通过脚本自动部署回滚web项目至集群 一:基础环境介绍及准备1):Gitlab服务器:ubuntu 192.168.152.131 ---参考搭建:Linux安装gitlab,docker安装gitlab教程2):Jenkins服务器:ubunu 192.168...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockershim。在V1.24起的版本的kubelet就彻底移除了dockershim,改为默认使用Conta...

K8S NFS 共享存储

NFS 共享存储前面我们学习了 hostPath 与 Local PV 两种本地存储方式,但是平时我们的应用更多的是无状态服务,可能会同时发布在不同的节点上,这个时候本地存储就不适用了,往往就需要使用到共享存储了,比如最简单常用的网络共享存储 NFS,本节课我们就来介绍下如何在 Kubernetes...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版,现已在其安卓应用中可用,之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器,用户可以在设置中选择不同模型,包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒,2.0...