Vue路由使用参数传递数据

一、使用query参数传递数据

(一)参数的传递

1. 携带参数进行传递

<router-link to="/路径?参数名1=参数值1&参数名2=参数值2">内容</router-link>

 我们在下面的代码中传递每条消息的id和标题:

2. 配置对象进行传递 

<router-link :to="{ path:"直接路径" query:{ a:xxx, b:xxx } }">内容</router-link>

(二)接收参数

$route.query.参数

二、使用params参数传递数据

params传参就是以 /路径1/路径2/参数1/参数2 的形式来传递参数。

(一)参数的传递

1. 占位符声明params参数

在配置该路由的path配置项后使用占位符来声明params参数

path:"路径/:参数名1/:参数名2"

2. 传递参数

(1)携带参数进行传递

<router-link to="/路径/参数值1/参数值2">内容</router-link>

(2)配置对象进行传递 

注意:to配置对象中只能使用name配置项,不能使用path配置项

不知道name配置项如何使用,可以看这篇文章:

Vue多级路由的实现-CSDN博客

<router-link :to="{ name:"路由" params:{ a:xxx, b:xxx } }">内容</router-link>

3. 接收参数

$route.params.参数

 

三、props参数

 我们在上面接收参数的时候过于繁琐,要一直写$route.quety.xxx 或 $route.params.xxx

VueRouter为我们提供了props参数来方便我们的书写。

(一)props值为对象

该对象中的所有的key-value组合都会通过props参数传递给该组件,多用于传递固定数据的场景

props:{ a:xxx, b:xxx }

(二)props值为布尔值

通过将paras设置为true,路由将所有收到的params参数通过props参数传递到组件

注意:该方法只能用于params传参的场景

paras:true

(三)props值为函数

函数返回对象中的每一组key-value都通过props的形式传递给组件

props(route) {

        return { a: route.query.xxx, b: route.query.xxx }

}

 

​​​​​​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/134574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

运动想象 EEG 信号分析

基于运动想象的公开数据集&#xff1a;Data set IVa (BCI Competition III)1 数据描述参考前文&#xff1a;https://blog.csdn.net/qq_43811536/article/details/134224005?spm1001.2014.3001.5501 本文使用公开数据集 Data set IVa 中的部分被试数据&#xff0c;数据已公开可…

C#在.NET Windows窗体应用中使用LINQtoSQL

目录 一、新建Windows窗体应用并添加LINQtoSQL类 二、错误信息CS0234 三、添加扩展包让Windows窗体应用支持LINQtoSQL类 默认安装的背景下&#xff0c;新建的Windows窗体应用是不支持LINQtoSQL类的。现象是资源管理器里的依赖项中默认的安装不能自动生成支持system.data.lin…

如何在Python爬虫中使用IP代理以避免反爬虫机制

目录 前言 一、IP代理的使用 1. 什么是IP代理&#xff1f; 2. 如何获取IP代理&#xff1f; 3. 如何使用IP代理&#xff1f; 4. 如何避免IP代理失效&#xff1f; 5. 代理IP的匿名性 二、代码示例 总结 前言 在进行爬虫时&#xff0c;我们很容易会遇到反爬虫机制。网站…

JS操作字符串常见方法

目录 一&#xff1a;前言 二&#xff1a;常见的内置方法 1、charAt与charCodeAt 2、indexOf与lastIndexOf 3、substring与substr 4、toLowerCase 和 toUpperCase 5、slice 6、replace 7、split 8、concat 9、trim 10、trimStart / trimLeft 11、trimEnd / trimRigh…

flutter开发报错The instance member ‘widget‘ can‘t be accessed in an initializer

文章目录 问题描述问题原因解决方法 问题描述 The instance member ‘widget’ can’t be accessed in an initializer. 问题原因 “The instance member ‘widget’ can’t be accessed in an initializer” 错误是因为在初始化器列表中&#xff08;constructor initializer…

[ACTF2020 新生赛]Upload 1

题目环境&#xff1a; 仍旧是文件上传漏洞 这道题和上一道大差不差、大同小异、这里不再赘述。 [极客大挑战 2019]Upload 1&#xff1a;https://blog.csdn.net/m0_73734159/article/details/134267317?spm1001.2014.3001.5501 区别在于本题需要在抓包数据里面改文件后缀&#…

2023年11月5日网规考试备忘

早上题目回忆&#xff1a; pki体系 ipsec&#xff0c;交换安全&#xff08;流量抑制&#xff09; aohdlc bob metclaf —ethernet pon tcp三次握手 OSPF lsa&#xff1f;交换机组ospf配置问题&#xff0c;ping网关可通&#xff0c;AB不通 raid6 300G*8 网络利用率 停等协议10…

《009.Springboot+vue之进销存管理系统》

《009.Springbootvue之进销存管理系统》 项目简介 [1]本系统涉及到的技术主要如下&#xff1a; 推荐环境配置&#xff1a;DEA jdk1.8 Maven MySQL 前后端分离; 后台&#xff1a;SpringBootMybatisredis; 前台&#xff1a;vueElementUI; [2]功能模块展示&#xff1a; 1.用户管…

亚马逊合规,亚马逊涉及12个站点合规政策更新,需警惕合规要求!

最近&#xff0c;许多亚马逊站点的卖家陆续收到了合规政策更新的通知邮件&#xff0c;涵盖了美国站、加拿大站、英国站、法国站、意大利站、德国站以及西班牙站。 这些更新影响了不同品类的卖家&#xff0c;包括以下品类&#xff1a; 美国站&#xff08;US&#xff09;对于“发…

【Linux】:文件系统

文件系统 一.认识硬件-磁盘1.磁盘的物理构成2.磁盘的存储构成3.逻辑结构 二.文件系统 文件内容属性&#xff0c;前面我们所说的文件操作都是针对以打开的文件&#xff0c;那么未打开的文件呢&#xff1f;当然是在磁盘上储存着&#xff0c;接下来谈谈它是如何储存的。 一.认识硬…

JavaEE平台技术——MyBatis

JavaEE平台技术——MyBatis 1. 对象关系映射框架——Hibernate、MyBatis2. 对象关系模型映射3. MyBatis的实现机制4. MyBatis的XML定义5. Spring事务 在观看这个之前&#xff0c;大家请查阅前序内容。 &#x1f600;JavaEE的渊源 &#x1f600;&#x1f600;JavaEE平台技术——…

个性化联邦学习-综述

介绍阅读的三篇个性化联邦学习的经典综述文章 Three Approaches for Personalization with Applications to Federated Learning 论文地址 文章的主要内容 介绍了用户聚类&#xff0c;数据插值&#xff0c;模型插值三种个性化联邦学习的方法。 用户聚类&#xff1a; 目的&a…

智能井盖传感器助力建设数字化城市

在推进智慧城市建设过程中&#xff0c;多个城市在打造数字化管理平台&#xff0c;因为通过科学技术手段统一管理城市各种基础设施建设&#xff0c;可以缓解传统人工不足所导致的执法困难的问题&#xff0c;而且可以方便城市管理及时响应。在智慧城市建设过程中&#xff0c;城市…

【慢SQL性能优化】 一条SQL的生命周期 | 京东物流技术团队

一、 一条简单SQL在MySQL执行过程 一张简单的图说明下&#xff0c;MySQL架构有哪些组件和组建间关系&#xff0c;接下来给大家用SQL语句分析 例如如下SQL语句 SELECT department_id FROM employee WHERE name Lucy AND age > 18 GROUP BY department_id其中name为索引&a…

算法训练 第六周

二、二叉树的中序遍历 本题给我们了一个二叉树&#xff0c;要求我们以中序遍历的方式输出它的值。 1.递归法 使用递归的方式来模拟遍历二叉树的过程&#xff0c;按照左头右的顺序进行&#xff0c;递归终止条件为遇到空节点&#xff0c;具体代码如下&#xff1a; /*** Defini…

基于Pymavlink协议的BlueROV开发

1 BlueROV概述 1.1 什么是ROV 维基百科遥控潜水器&#xff08;Remotely operated underwater vehicle&#xff0c;缩写ROV&#xff09;是一个无人的水下航行器&#xff0c;以电缆连接到母船的人员操作。常搭载水下光源和照相机、摄影机、机械手臂、声纳等。因为具有机械手臂&a…

小白学爬虫:通过关键词搜索1688商品列表数据接口|1688商品列表数据接口|1688商品列表数据采集|1688API接口

通过关键词搜索1688商品列表数据接口可以使用1688开放平台提供的API接口实现。以下是使用关键词搜索商品列表数据的基本步骤&#xff1a; 1、注册并获取AppKey。 2、构造请求参数&#xff0c;包括搜索关键词、页码、每页条数等。 3、通过API接口链接&#xff0c;将请求参数发送…

【广州华锐互动】气象卫星监测AR互动教学软件为气象学习带来更多乐趣

由VR制作公司广州华锐互动开发的气象卫星监测AR互动教学软件是一款结合了增强现实(AR)技术与气象监测技术的教育软件。它通过直观、互动的方式&#xff0c;帮助学生更好地理解和掌握气象监测的基本知识和技能。本文将从气象卫星监测AR互动教学软件的应用场景、优势分析、实际意…

【SVN】

SVN 1 svn使用1.1 主干合并到分支1.2 分支合并到主干1.3 分支建立1.4 创建分支1.5 切换分支1.6 合并分支1.7 删除分支 2 概念理解 1 svn使用 1.1 主干合并到分支 首先&#xff0c;在本地trunk中先update一下&#xff0c;有冲突的解决冲突&#xff0c;保证trunk和repository已…

初步了解 RabbitMQ

目录 ​编辑一、MQ 概述 1、MQ 的简介 2、MQ 的用途 &#xff08;1&#xff09;限流削峰 &#xff08;2&#xff09;异步解耦 (3)数据收集 二、RabbitMQ 概述 1、RabbitMQ 简介 2、四大核心概念 3、RabbitMQ 的核心部分 ​编辑 4、名词解释&#xff1a; 三、Hello …