vue路由传参(query和params两种方式)

vue传参常用的两种传参方式

  • query方式:
    • 参数拼接在url上
    • 刷新页面不会丢失数据
    • 但如果传递对象或者数组过大时,会出现url过长导致异常错误的问题
    • 参数为对象或者对象组成的数组时,需要使用JSON.stringify()格式化,接收时JSON.parse()解析
    • 可以使用name或者path指定跳转页面
  • params方式:
    • 参数不会拼接在url上
    • 刷新页面会丢失数据
    • 只能使用name来指定跳转的页面

1、query传参方式

1.1、可以使用path或者name方式进行传参

// pageA
this.$router.push({name: 'pageB', // 1、可以用name来指定跳转的页面;2、name值是路由声明时对应name的值path: '/pageB', // 1、也可以用path来指定跳转的页面query: {'name': '张三'}})
// pageB页面接收
this$route.query.name

1.2、query传递对象或者对象组成的数组时,需要注意数据解析错误的问题

// pageA页面
this.$router.push({path: '/pageB',// 传递参数为对象组成的数组或者对象时,页面刷新会导致值变为[Object, Object],需要使用JSON.stringify()转为字符串,接收时使用JSON.parse()处理参数// 参数是有基本类型数据组成的数组时,刷新页面能正常显示query: {'nameObj': JSON.stringify({name: '张三'})}})
// pageB页面接受
JSON.parse(this.$route.query.nameObj)

2、params传参方式

this.$router.push({// path: '/pageB', // params传参,使用path来指定跳转页面时,页面可以正常跳转,但参数会丢失name: 'pageB', // 1、params传参必须指定name来指定跳转的页面;2、name值是路由声明时对应name的值params: {'name': '张三'}})
// pageB页面接收
this.$route.params.name

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

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

相关文章

2. 皇后的控制力

题目描述: 我们对八皇后问题进行扩展。 国际象棋中的皇后非常神勇,一个皇后可以控制横、竖、斜线等4个方向(或者说是8个方向),只要有棋子落入她的势力范围,则必死无疑,所以对方的每个棋子都要…

1.4【应用开发】缓冲区(一)

写在前面 缓冲区是存储像素数据的内存区域。多个缓冲区可以与窗口或流相关联,但只有一个缓冲区可以与位图相关联。 一,创建缓冲区 你可以创建内部缓冲区和外部缓冲区,如下: 1.1 内部缓冲区 我们可以通过调用以下Screen API函数来为位图,流,窗口创建内部缓冲区: sc…

O_APPEND影响写入追加,而不影响读文件

O_APPEND 标志用于打开文件时,对写入操作进行追加。它并不直接影响读取文件的操作。 当使用 O_APPEND 标志打开文件时,写入操作会自动将数据追加到文件的末尾,而无论文件指针的位置在哪里。这对于避免并发写入时的竞争条件非常有用&#xff…

腾讯云服务器优惠活动大全页面_全站搜优惠合集

腾讯云推出优惠全站搜页面 https://curl.qcloud.com/PPrF9NFe 在这个页面可以一键查询所需云服务器、轻量应用服务器、数据库、存储、CDN、网络、安全、大数据等云产品优惠活动大全,活动打开如下图: 腾讯云优惠全站搜 腾讯云优惠全站搜页面 txybk.com/go…

java-IO流

File类 引入 【1】文件,目录: 文件: 内存中存放的数据在计算机关机后就会消失。要长久保存数据,就要使用硬盘、光盘、U 盘等设备。为了便于数据的管理和检索,引入了“文件”的概念。一篇文章、一段视频、一个可执…

Element的安装以及基本使用

Element是基于Vue的网站组件库,用于快捷构建网页 像上面这样的样式 官网地址 Element - 网站快速成型工具 安装 npm i element-ui -S 装包命令 npm install babel-plugin-component -D 安装好之后会在package.json里面显示版本 在node_modules中会自动初始化一个 …

opencv中叠加Sobel算子与Laplacian算子实现边缘检测

1 边缘检测介绍 图像边缘检测技术是图像处理和计算机视觉等领域最基本的问题,也是经典的技术难题之一。如何快速、精确地提取图像边缘信息,一直是国内外的研究热点,同时边缘的检测也是图像处理中的一个难题。早期的经典算法包括边缘算子方法…

记录一次API报文替换点滴

1. 需求 各位盆友在日常开发中,有没有遇到上游接口突然不合作了,临时需要切换其他接口的情况?这不巧了,博主团队近期遇到了,又尴尬又忐忑。 尴尬的是临时通知不合作了,事前没有任何提醒; 忐忑…

C语言:文件操作

文章目录 每日一言文件操作文件的打开和关闭操作:文件的读写操作: 结语 每日一言 If I have seen further, it is by standing on the shoulders of giants. 如果我能看得更远,是因为站在巨人的肩膀上。 文件操作 C语言文件操作主要通过文…

基于SpringBoot和微信小程序的校园快递平台系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot和微信小程序的校园快递平…

AI浅谈:计算机视觉(CV)技术的优势和挑战

目录 一、计算机视觉技术的优势 1.效率和精度提高 2.提高安全性 3.促进自动化 4.促进科学研究 5.促进商业发展 二、计算机视觉技术的挑战 1.环境变化 2.精度问题 3.隐私和安全问题 4.数据质量 5.系统复杂度 以上是对计算机视觉技术的优势和挑战的概述,…

《哥德尔证明》阅读笔记——一致性问题的绝对证明

前言 追问一个公理系统的一致性,我们知道一个模型法,即从现实经验中找到一个模型,能将所有公理映射成此模型的真陈述,但很多系统模型是无穷的,比如想检验“空间中两点能确定一条直线”这个欧氏几何公理在空间模型中的…

MQTT 介绍与学习 —— 筑梦之路

之前写过的相关文章: MQTT协议(转载)——筑梦之路_mqtt url-CSDN博客 k8s 部署mqtt —— 筑梦之路-CSDN博客 CentOS 7 搭建mqtt服务——筑梦之路_腾讯云宝塔搭 centos 7.9.2009 x86_64 建标准mqtt服务器-CSDN博客 mqtt简介 MQTT&#xff…

Js中数组的实用语法

1. 循环 a. 循环项 const arr [1, 2, 3];for (let item of arr) {console.log(item); } // 输出:1 2 3b. 循环键 const arr [1, 2, 3];for (let key in arr) {console.log(key); } // 输出:0 1 2c. 循环键值对 const arr [1, 2, 3];arr.forEach((…

Mysql数据库 19.Mysql 锁

MySQL锁 锁:锁是计算机用以协调多个进程间并发访问同一共享资源的一种机制,在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共享的资源,如何保证数据并发访问的一…

SpringBoot 自动装配原理---源码详解

目录 SpringBoot 自动装配原理源码流程详解:流程总结:条件匹配解释:其他解释: SpringBoot 自动装配原理 源码流程详解: 1、先看启动类,启动这个main方法,然后调用这个run方法。 2、把 启动类作…

南京邮电大学数据库实验二

1. 用create database命令创建电影数据库(MovieDB)。 create database MovieDB; 在创建表之前需调用一下指定的数据库: use MovieDB; 2.在电影数据库中用create table 命令创建如下5个关系模式: 创建movies表: create table Movies( ti…

城市货车通行码二维码解析

目录 说明 界面 下载 城市货车通行码二维码解析 说明 二维码扫描信息为: tmri://12123?ywlx1041&ewmeyJ0eHpiaCI6IjUxMDcwMDAwMDE0MyIsInR4em1jIjoiQeivgSIsImhwemwiOiIwMiIsImhwaG0iOiLlt51CMkwzMjYiLCJrc3JxIjoiMjAyMS0xMS0yOCIsImpzcnEiOiIyMDIyLTEyL…

虚幻学习笔记12—C++类的实例化

一、前言 本系列如无特殊说明使用的虚幻版本都是5.2.1,VS为2022版本。在Unity中通常创建的脚本都默认继承了MonoBehavior,都是不能再用代码New而实例化的,虚幻也是一样不能直接New来实例化。在Unity中是通过Instantiate方法来实例化一个游戏对…