vue中路由传参和接参

方法一:params 传参

this.$router.push({name:"admin",//这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取)params:{id:item.id}
})    //这个组件对应的路由配置
{//组件路径path: '/admin',//组件别名name: 'admin',//组件名component: Admin,
}

通过 params 传递参数,如果我们想获取 id 的参数值,可以通过 this.$route.params.id。

//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;

⚠️特别注意:获取参数的时候是 route,跳转和传参的时候是 r o u t e r 。(注意route与router的区别)

demo

// 传递
<divclass="box df-column"v-for="(item, index) in descList":key="index"@click="goToDetail(item, 'policyInterpretation')"></div>goToDetail(data, name) {this.$router.push({name,params: {data,}})console.log(data, "政策中心");},// 接收console.log(this.$route.params) // 必须配合name使用

方法二:路由属性配置传参

this.$router.push({path:"/admin/${item.id}",
})    //这个组件对应的路由配置
{//组件路径path: '/admin:id',//组件别名name: 'admin',//组件名component: Admin,
}

通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值。

//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;

⚠️注意:this.$router.push 方法里面路径带的是值,路由配置项那里带的是变量名(属性名)来实现的对应。

以上两种传参方式基本上可以理解为 ajax 中的 post 请求方式,参数都是不可见的,但是上面两种方法都有一个弊端,就是当页面刷新了是获取不到参数值的,那么有没有一种方法是页面刷新之后参数依然存在呢? 👇

方法三:query 传参


this.$router.push({name:"/admin",query:{id:item.id,name:item.name,}
})//这个组件对应的路由配置
{//组件路径path: '/admin',//组件别名name: 'admin',//组件名component: Admin,
}

通过 query 传参,如果我们想获取 id 的参数值,可以通过 this.$route.query.id。

//vue接收页面
let id= this.$route.query.id;
let name= this.$route.query.name;

用 query 传参可以解决页面刷新参数消失问题,这种方式可以理解为是 ajax中的 get 方法,参数是直接在 url 后面添加的,参数是可见的。

方法四:localStorage

// 存数据
localStorage.setItem("numbers", JSON.stringify(this.numbers));// 取数据
this.numbers = JSON.parse(localStorage.getItem("numbers"));

但是注意使用 localStorage 时,如果变量名起的过于普通可能容易被其它页面存的数据覆盖。

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

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

相关文章

基于python实现心血管疾病风险预测分析

一、项目简介 项目背景 利用心血管疾病风险预测数据集进行深入分析&#xff0c;探究不同因素与心血管疾病风险之间的关联。 数据源 Kaggle上的心血管疾病风险预测数据集。&#xff08;Cardiovascular Diseases Risk Prediction Dataset | Kaggle&#xff09; 二、数据预处…

2次MD5加密——用于分布式对话

用户端 &#xff1a; 指发起请求并与服务器进行交互的终端设备或应用程序。它可以是电脑、智能手机等。 用户端负责发送请求给服务端&#xff0c;并接收和处理服务端返回的响应。 服务端 &#xff1a; 是指提供服务、接收和处理用户端请求的计算机系统或应用程序。 它监听来自用…

视图层、模板(补充)

视图层 响应对象 响应---》本质都是 HttpResponse HttpResponse---》字符串render----》放个模板---》模板渲染是在后端完成 js代码是在客户端浏览器里执行的模板语法是在后端执行的redirect----》重定向 字符串参数不是是空的状态码是 3开头JsonResponse---》json格式数据 …

Moonbeam生态项目分析 — — DeFi借贷协议Moonwell

流动性激励计划Moonbeam Ignite是帮助用户轻松愉快体验Moonbeam生态的趣味活动。在Moonbeam跨链连接的推动下&#xff0c;DeFi的各种可能性在这里爆发。DeFi或许不热门&#xff0c;但总有机会捡漏&#xff0c;了解Monbeam生态项目&#xff0c;我们邀请Moonbeam大使分享他们的研…

【linux防火墙】设置开启路由转发,SNAT和DNAT转换原理及应用实操,添加自定义链归类iptables规则

目录 一、关于iptables规则的保存 1.1持久保存规则 1.2加载规则 1.3开机自动加载规则 1.4使用iptables-service软件来进行规则的保存和加载&#xff08;不建议使用&#xff09; 二、SNAT和DNAT的原理和应用 SNAT的原理与应用&#xff1a; DNAT的原理和应用&#xff1a; …

在java java.util.Date 已知逝去时间怎么求年月日 数学计算不用其他方法

在Java中&#xff0c;使用java.util.Date类已知逝去时间求年月日的方法如下&#xff1a; 首先&#xff0c;获取当前时间和逝去时间之间的毫秒数差值&#xff0c;可以使用Date类的getTime()方法获得时间戳。 将毫秒数转换为秒数&#xff0c;并计算出总共的天数。 根据总共的天…

应用软件快速开发平台,一起实现办公流程化发展!

做好办公流程化发展能给企业带来什么好处&#xff1f;其实&#xff0c;在快节奏发展社会中&#xff0c;很多企业的规模和业务量也在不断扩展中&#xff0c;如果还是懒散的办公方式是不能达到事半功倍的效果的。要想实现高效率发展&#xff0c;采用办公流程化发展能让企业管理朝…

【广州华锐互动】节约用水VR互动教育:身临其境体验水资源的珍贵!

随着技术的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术在许多领域得到了广泛应用。在节水宣传教育方面&#xff0c;VR技术也展现出了其独特的优势。与传统宣传教育方式相比&#xff0c;节约用水VR互动教育具有更加沉浸式、互动性和实践性的特点&#xff0c;能…

【全栈开发】Next.js与RedwoodJS——比较js框架

Next.js和RedwoodJS是两个广泛用于构建web应用程序的JavaScript框架。这两个框架都提供了一系列功能和好处&#xff0c;但它们在方法和理念上有所不同。在本文中&#xff0c;我们将仔细研究Next.js和RedwoodJS&#xff0c;并对它们进行比较&#xff0c;以帮助您为项目选择正确的…

java开发之基于个微群聊二次开发

请求URL&#xff1a; http://域名地址/getGroupQrCode 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRoomI…

强化学习-DQN

网上看来很多&#xff0c;但是还是觉得这篇文章将得最好&#xff1a; 可视化强化学习解释 - Deep Q Networks&#xff0c;循序渐进 |Ketan Doshi 博客 (ketanhdoshi.github.io)

泛域名SSL证书是什么?泛域名SSL证书价格多少钱?

泛域名SSL证书是一种SSL证书类型&#xff0c;也被称为通配符SSL证书。SSL证书是保护网站数据传输安全及服务器身份可信的数字证书产品&#xff0c;通常绑定域名或IP&#xff0c;配置到网站服务器上。SSL证书根据保护域名数量及域名类型的不同&#xff0c;可以分为单域名SSL证书…

CentOS7.5搭建Hadoop-3.3.6集群的详细操作流程-实操版本

一、准备工作 1、安装 VMware&#xff0c;已安装的&#xff0c;跳过此步骤即可 官方正版VMware下载&#xff08;16 pro&#xff09;&#xff1a;https://www.aliyundrive.com/s/wF66w8kW9ac 安装&#xff1a;选一下安装地址&#xff0c;一直下一步即可。&#xff08;可能会要…

(免费领源码)Python#MySQL图书馆管理系统071718-计算机毕业设计项目选题推荐

摘 要 随着时代的不断更新&#xff0c;社会的不断变换&#xff0c;信息技术的飞速发展&#xff0c;计算机科技技术也逐步走向成熟。图书馆管理系统对于当今社会来说是必不可少的一个信息组成部分&#xff0c;它可以管理大量图书、大量读者、让读者有条不紊的进行借阅图书&#…

Sui受邀参加Builder DAO举办的LeadUp The Night活动,畅谈Sui与Move语言

LeadUp the Night是一个定期举办的MeetUp活动&#xff0c;由Builder DAO邀请区块链各方项目开发者、VC担任本活动的讲师。这个活动旨在促进区块链技术的发展和应用&#xff0c;让参与者有机会开发创新的区块链应用&#xff0c;探索区块链技术的潜力。 ​​11月30日受BuilderDA…

python调用chatgpt4

import openai import os # optional; defaults to os.environ[OPENAI_API_KEY] openai.api_key "sk-XXXX" # 你的 OpenAI API Keyprompt "The following is a conversation with an AI assistant. The assistant is helpful, creative, clever, and very fr…

豆粕期权 MVIX 指数构建及策略回测

1. VIX指数 VIX 最初被设计出来的目的是为了预警市场的潜在风险&#xff0c;一般来说&#xff0c;当 VIX 指数小于 15 时&#xff0c;表示市场出现非理性繁荣&#xff1b;当 VIX 指数大于 40 时&#xff0c;表示市场对 未来的非理性恐慌&#xff0c;短期内可以出现反弹。VIX 指…

leetcode面试经典150题——34 有效的数独(矩阵)

题目&#xff1a; 有效的数独 描述&#xff1a; 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。 数字 1-9 在每一列只能出现一次。 数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出…

【产品功能】dolphinscheduler的告警功能的代码在哪

告警 MasterExecThread类runProcess方法涉及到的表和字段 总结番外 MasterExecThread类 runProcess方法 if(!sendTimeWarning && checkProcessTimeOut(processInstance) ){alertManager.sendProcessTimeoutAlert(processInstance,processService.findProcessDefineBy…

Provisioning Profile的重要性

大家好&#xff0c;我是咕噜-凯撒。在iOS和macOS开发中&#xff0c;Provisioning Profile&#xff08;配置文件&#xff09;是一个至关重要的组成部分&#xff0c;它包含开发者证书、App ID和设备信息的文件&#xff0c;不仅用于验证应用程序的身份和权限&#xff0c;还包括了很…