关于Vue-$router传参出现刷新页面或者返回页面丢失数据的问题
也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式params或者query
1.query
this.$router.push({
path: 'newApply',
query: {
type: item.key,
typeDesc: item.value
}
})
2.params
this.$router.push({
name: 'newApply',
params: {
type: item.key,
typeDesc: item.value
}
})
比较用法
1.用法
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
2.url地址显示
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
query
http://localhost:8080/workorder/newApply?type=BOX_DEPLOY&typeDesc=%E5%B0%8F%E7%99%BD%E7%9B%92%E9%83%A8%E7%BD%B2
params
http://localhost:8080/workorder/newApply
3.注意点
query刷新不会丢失query里面的数据
params刷新 会会 丢失 params里面的数据
关于Vue-$router传参出现刷新页面或者返回页面丢失数据的问题的更多相关文章
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- 每日技术总结:vue router传参方式,js获取设备高度
今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...
- vue router 传参 获取不到query,params
千万要注意,获取query/params 是this.$route.query 不是this.$router.query!!!
- VUE -- router 传参和获取参数
- python脚本文件传参并通过token登录后爬取数据实例
from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue-router 路由传参的几种方式,刷新页面参数丢失
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...
随机推荐
- 【D3D12学习手记】CPU/GPU Synchronization
由于有两个并行运行的处理器(CPU和GPU),会出现许多同步问题.假设我们有一些资源R存储了我们希望绘制的某些几何体的位置. 此外,假设CPU更新R的数据以存储位置p1,然后将引用R的绘图命令C添加到 ...
- [转] 运维知识体系 -v3.1 作者:赵舜东(赵班长)转载请注明来自于-新运维社区:https://www.unixhot.com
[From]https://www.unixhot.com/page/ops [运维知识体系]-v3.1 作者:赵舜东(赵班长) (转载请注明来自于-新运维社区:https://www.unixhot ...
- java读取blob,clob转换为字符串
直接上代码: package com.it.test; import java.io.BufferedReader; import java.io.StringWriter; import java. ...
- 第一个python-ui界面
首先是安装eric6简直是个灾难,先是找不到汉化版的eric6,好不容易找到了,一打开eric6的窗体就说designer.exe不存在,确实在PyQt5里没有,明明在PyQt5-tools里面有,最 ...
- 【神经网络与深度学习】ZLIB介绍
zlib类库提供了很多种压缩和解压缩的方式,由于时间的关系我只学习一下内容,以下是我在实现web 服务器压缩数据网页中使用到一些函数和常用数据结构.常量等. zlib使用过程 压缩过程:deflate ...
- 51CTO下载-html+javascript+css学习宝典
一.html知识 1. meta标签 Meta: 提供网页信息,搜索引擎使用 <meta name=“aa” content=“bbb”> <meta http-equiv=“exp ...
- selenium 安装流程
安装 1.安装python 2.cmd中输入:pip install selenium 输入pip show selenium检查是否安装完成 3.下载chromedriver 在浏览器中输入chro ...
- 小记---------sparkRDD的Transformation 和 Action 及案例 原理解释
RDD :弹性分布式数据集:是一个容错的.并行的数据结构,可以让用户显式地将数据存储到磁盘或内存中,并控制数据的分区 RDD是Spark的核心数据结构,通过RDD的依赖关系形成Spark的调度顺序 ...
- 坦克大战--Java类型 ---- (1)音乐播放
实现原理 我用接口java.applet.AudioClip实现音乐播放,那么我们需要了解这个接口的情况. 我们主要使用其中的三个方法: (1)void loop(); //循环播放(2)void p ...
- HTML5自学2
1.1 文字格式 一个杂乱无序.堆砌而成的网页,会让人感觉枯无味,而一个美观大方的网页,会让人有美轮美奂,流连忘返的感觉,本节将介绍如何设置网页文本格式. 文字格式包括字体.字号.文字颜色.字体风 ...