vue中使用params传参,刷新页面后params参数丢失解决方案

Vue使用params方式传参数据丢失 前言 在vue的组件之间传递数据时,因为不想url上面有?xx=yy的内容出现,所以选择params形式传递参数,正常跳转,好看又方便 问题出现了:突然在刷新跳转之后的页面的时候,页面的数据加载不出来了,仔细一看,原来是路由中携带的参数不见了!! 组件刷新还能导致路由的参数丢失。 一、 Vue-router传递参数的方式说明 query传递参数 query传递参数不会出现路参数丢失的情况,所... 阅读详情
解决方案:
  1. 配合sessionStorage实现刷新页面后数据不丢失
    (网上很多都是使用localStorage配合使用,但是有个问题是将当前页面直接关闭了,重新进来后localStorage还是存在的。而使用sessionStorage,页面关闭后会自动删除)
export default {
	created(){
		   var paramsData = sessionStorage.getItem("paramsData");
	       if(paramsData){
	            var params = JSON.parse(sessionStorage.getItem("paramsData"));
	        }else{
	            var params = this.$route.params;
	            sessionStorage.setItem("paramsData", JSON.stringify(params));
	        }
	        this.params = params;
		},
	// 页面销毁之前
    beforeDestroy() {
        sessionStorage.removeItem('paramsData')
   	},
	}
  1. 使用动态路由
    使用动态路由,访问路由地址为:/vuew1/username/6110(感觉和query访问差不多,如果参数多点路由地址会显得很长,不大美观。)
    在router.js中设置路由
const routes = [
  {
    path: '/view1/:name/:idno',
    name: 'view1',
    component: () => import( '../admin/view1.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

页面中使用

this.$router.push({name:'view1', params:{name:'张三', idno:'123123'}});
<router-link :to="{name:'view1', params: {name:'张三', idno:'123123'}}">跳转</router-link>
Vue路由传参实战:为什么我的$router.push() params参数不见了? 本文深入解析Vue-router中$router.push() params参数丢失的常见问题,详细对比params与query传参的核心区别,并提供三大原因分析及解决方案。通过实战示例展示如何正确配置路由、发送和接收参数,帮助开发者避免常见陷阱,实现安全可靠的Vue路由传参。 阅读详情

相关推荐

在 Vue3 中,路由跳转传值方法、常见场景、问题及最佳实践解决方案

Vue3 使用 Vue Router 4.x,路由传值主要通过以下方式实现

繁若华尘的博客 2892

vue params传参刷新网页数据丢失解决方法

vue params传参刷新网页数据丢失解决方法

domnk的博客 3091

Vue2路由守卫:解决路由传参页面刷新后参数消失的问题

sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分,用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据,而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制,且只能存储字符串类型的数据,但可以通过序列化和反序列化的方式存储其他类型的数据。

l_q_l的专栏 3458

vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题

在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据。今天经过总结,解决了这个问题。通过了一下几种情况进行传值:通过路由params传参通过路由query传参通过vuex1.通过params传参先在路由path里那个组件需要传递参数,定义一个参数,用于组件传递,params刷新页面数据会丢失。path: "/chat...

weixin_40003283的博客 2240

解决屏幕不亮难题:慷智SerDes DE信号极性配置避坑指南

本文深入探讨了基于慷智AIM95x系列SerDes芯片的嵌入式显示系统开发中,因DE信号极性配置不匹配导致屏幕不亮的典型故障。文章详细解析了DE信号的核心作用与极性定义,提供了慷智SerDes芯片中DE极性寄存器的具体配置方法与调试记录,并给出了从隔离问题、对比时序到波形验证的系统性排查流程,帮助工程师快速定位并解决此类隐蔽问题。

weixin_29185493的博客 141

海康威视摄像头CVE-2017-7921漏洞复现:从零到一的实战指南(含解密工具下载)

本文详细解析了海康威视摄像头CVE-2017-7921漏洞的技术原理与复现方法,提供从环境搭建到实战利用的完整指南。通过认证绕过漏洞,攻击者可获取敏感信息并执行高权限操作,文章还包含解密工具下载与防御建议,助力安全研究人员深入理解物联网设备安全风险。

weixin_29325515的博客 813

vue路由传参方式及解决传参刷新页面参数丢失问题

1、当使用params传参时,刷新页面会导致参数丢失: onRouter() { this.$router.push({ name: 'Index', params: { mm: '0000' } }) }, 接受页面: mounted(){ console.log(this.$route.params.mm) }, 此种传参方式参数...

mm 2431

STM32驱动HC-SR04超声波模块:两种精准测距方案详解

本文详解STM32驱动HC-SR04超声波模块的两种精准测距方案:定时器中断计数法和外部中断边沿检测法。涵盖硬件连接、代码实现与优化技巧,帮助开发者根据精度和复杂度需求选择合适方案,提升超声波测距在嵌入式项目中的稳定性和准确性。

g5h6i的博客 684

vue路由传参刷新页面数据丢失问题

问题: 在写项目的时候,使用params路由传参,刷新页面,结果参数报错消失。 原因: 使用params传参的时候,当你跳转到子页面,如果你刷新页面,代表就不是从父级页面跳转过来的,参数当然会消失。 问题解决: 1、使用query传参数,因为query是在链接之中携带的参数,相当于get请求,你即便刷新,链接也依旧携带了参数。 2、存储于vuex之中,不过一般数据量不是太大,或者不是垮多个页面,亦或者其他方面的特殊需求,不建议使用。 3、使用sessionStorage、localStorage,不建议使用

TE杨 1136

STM32F4XX软件模拟I2C实现MPU6050姿态数据采集

本文详细介绍了在STM32F4XX平台上通过软件模拟I2C驱动MPU6050传感器实现姿态数据采集的完整方案。内容涵盖软件I2C的GPIO配置、核心通信函数实现、MPU6050寄存器配置详解以及数据读取处理流程,为硬件资源受限的嵌入式应用提供了灵活的解决方案,并分享了调试技巧与常见问题处理方法。

butter的博客 678

全志T527 适配双目tp2815_mipi

在全志T527 linux下适配双目TP2815 mipi摄像头,支持六路同时输出,四路可用作360环视、一路face id等,一路用于其它开发。

Linux驱动开发工程师,熟悉Linux/Android底层驱动、TP、显示、IIC、网络等通用外设调试适配,Linux上层应用开发。常用平台瑞芯微、全志、恩智浦等。 3816

路由传参的几种方式,强制刷新参数是否丢失

1、在路由文件配置参数,强制刷新参数绝对不会丢失 //路由文件 { path:'/child/:id/:key', name:'child', component:Child } //跳转传参 id=2 key=33 this.$router.push({path:`/child/${id}/${key}`}) this.router.push({name:'child',params:{i...

xc_buxiangzhangda的博客 1523

华为OD机试真题 新系统2026-04-08 C++ 实现【直捣黄龙】

小王在玩一款叫做直捣黄龙的小游戏,在该游戏中他需要从入口位置进入敌营,绕过哨兵的层层封锁,达到敌军司令部实施斩首行动。 敌军阵营是一个n*n的矩阵,入口在坐标(0,n/2),敌军司令部在坐标(n-1,n/2),每个 哨兵警戒以自己为中心的9宫格,一旦被哨兵发现则行动失败。

MISAYAONE的博客 261

Vue路由params、query参数丢失解决

在vue中路由传参有两种形式:1.params;2.query 解决办法:sessionStorage或者localStorage 两者的区别:localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面,通俗点页面一和页面二; 页面一给页面二传递路由参数 params参数 this.id = 666 this.$router.push({ name: '页面二', params: {

见贤思齐焉,见不贤内自省 5213

【23】C++实战篇——C++报错:LNK2001:无法解析的外部符号 ,LNK2019: 无法解析的外部符号,原因分析及解决方法

该文分析了VS项目中出现的"无法解析的外部符号"LNK2001/LNK2019错误。问题表现为跨项目共享变量时,Projector项目无法解析Line项目中声明的外部变量ImgSavePath和ImgFormat。原因在于头文件声明了变量但未包含实现的源文件。解决方法是将getLine.cpp文件添加到Projector项目中。文章还总结了两种错误代码的区别:LNK2001通常对应变量缺失,LNK2019对应函数缺失。最后列出了具体的报错信息,包括无法解析的变量和函数符号。

程序员,他们想的是什么?他们想的永远都是技术,他们崇尚的也永远都是技术。 2007

PNP NPN线性接近开关接线嵌入式:详细指南与示例代码

在嵌入式系统中,PNP和NPN线性接近开关是常用的传感器类型,用于检测物体的接近或离开。在嵌入式系统中,PNP和NPN线制接近开关是常用的传感器类型,用于检测物体的接近或离开。本文提供了有关PNP和NPN线性接近开关接线的详细指南,并提供了一个简单的示例代码,以帮助您在嵌入式系统中正确使用这些传感器PNP NPN 线制接近开关接线 嵌入式:详细指南与示例代码。与PNP开关不同的是,NPN线性接近开关的正极连接至系统的正极电源。与PNP开关不同的是,NPN线制接近开关的正极连接至系统的正极电源。

CyberSphinx的博客 1272

Vue组件传参

bug记录

小7的博客 326

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

vue有默认参数传参_vue $router 路由传参的4种方法详解

前沿最近,由于工作需要,需要去面试一些前端,由于自己是那种实操型的程序猿,不擅长这方面,但是没办法,只能硬着头皮上,第一次有些紧张,后来慢慢就好了,在过程中,发现面试别人自己可以系统的学到很多知识,比如说有些原理性的东西,系统的知识,就可以在学习一遍,并且比之前理解的更透彻了,所以说,什么时候都可以学习,加油吧,骚年。下面主要说一下vue $router 路由传参的3种方法详解,里边包括了一些,配...

weixin_42572602的博客 3422

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Vue路由传参 query 和 params 方式详解

query方式: 直白的来说 query 相当于 get 请求,页面跳转的时候,可以在地址栏看到请求参数; 使用方式:使用 path 来匹配路由,然后 通过 query 来传递参数;(也可以用 name 匹配路由) 父组件: this.$router.push({ path: "/home", query: { id: 2333 ...

Wayne8016的博客 949

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

vue使用params路由传参出现undefined

params路由传参出现undefined的解决办法 router.js: 关键要写name { name: 'search', path: '/search', component: Search }, 发送参数的组件中: (query传参时用 path 定位,而这里用 name ) this.$router.push({ name: 'search', params: { quer...

luxurie的小窝 6757

新手使用vue-router传参时注意事项

1. 使用name和params组合传参 this.$router.push({name: 'details', params: {'id': 233}}) 路由配置 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'hist...

weixin_44695402的博客 467

VUE路由传参之params传参和query传参

下列观点只代表个人观点,如有不足之处,烦请指正!!! 遇到问题描述 今天在页面间使用$router.push传参时,发现页面刷新数据之后,路由中params的数据丢失了。 解决办法 1.继续使用params传参 继续使用params传参,需要在对应路由中添加参数,用来存储(不知道这么说对不对)params中对应的参数。 如图 模板文件中路由传参写法 路由文件中路由写法 2.使用query路由传...

weixin_42626678的博客 277

vue路由传参页面刷新参数丢失问题解决方案,2024前端面试题

其实前端开发的知识点就那么多,面试问来问去还是那么点东西。所以面试没有其他的诀窍,只看你对这些知识点准备的充分程度。so,出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线:(以下体系的复习资料是我从各路大佬收集整理好的)《前端开发四大模块核心知识笔记》最后,说个题外话,我在一线互联网企业工作十余年里,指导过不少同行后辈。帮助很多人得到了学习和成长。

2401_83974064的博客 1536

vue路由跳转携带的参数消失了

最近我发现我用params传参时,参数怎么也接收不到,地址栏url中也看不见参数,控制台也不见报错,于是上网查了下原来用第一种方式传参页面刷新后参数会消失,从而获取不到,第二种方式就不会出现参数消失的情况。方法一:在配置路由的时候添加动态参数,路由跳转时还是采用第一种params传参,获取参数直接使用this.$route.params.code。但是我做的这个项目有点特殊,必须要通过路由的name进行跳转,下面两种方法我都尝试了,可以成功获取到了参数,亲测有效(*^_^*)1)params传参。

tt1234561009的博客 3157
上一篇: mysql使用sql语句查询某个字段值除10等于0的所有数据
下一篇: vue2注册组件及传参(全局注册)
if时光重来
博客等级 码龄8年 248粉丝 217原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值