也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式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传参出现刷新页面或者返回页面丢失数据的问题的更多相关文章

  1. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  2. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  3. 每日技术总结:vue router传参方式,js获取设备高度

    今天貌似没什么问题,23333…… 1.vue router 路由传参的方式 应用情景:从分类页(category.vue)进入商品列表页(list.vue),需要传递商品分类id(catId),商品 ...

  4. vue router 传参 获取不到query,params

    千万要注意,获取query/params 是this.$route.query 不是this.$router.query!!!

  5. VUE -- router 传参和获取参数

  6. python脚本文件传参并通过token登录后爬取数据实例

    from bs4 import BeautifulSoup import requests import sys class Zabbix(object): def __init__(self, he ...

  7. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  8. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  9. vue-router 路由传参的几种方式,刷新页面参数丢失

    常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...

随机推荐

  1. mongod 对指定数据库创建用户

    https://blog.51cto.com/wzlinux/2153062?source=dra 1.先在admin库中创建管理员用户与密码 [root@mbasic ~]# mongo Mongo ...

  2. ubuntu中配置jdk1.8

    方法/步骤   1 首先,百度搜索jdk,选择第一个,网站是Oracle Jdk.点击进去 步骤阅读 2 点击Download,到官网下载linux版本的jdk.选择自己对应的操作系统及32或64位版 ...

  3. HTTP请求的python实现(urlopen、headers处理、 Cookie处理、设置Timeout超时、 重定向、Proxy的设置)

    python实现HTTP请求的三中方式:urllib2/urllib.httplib/urllib 以及Requests urllib2/urllib实现 urllib2和urllib是python两 ...

  4. 网页制作入门——HTML(2)编码与字符实体

    在上一期,我们顺口提到了——你写的网页在打开后,可能发现只是一串乱码.那么这是为什么呢? 这就是编码的神奇力量! 八卦的启示——什么是编码? 编码的思想,很早就在中国诞生了,从还不太明朗的结绳记事.算 ...

  5. 阿里EMR原理

    hadoop2.8.5: https://hadoop.apache.org/docs/r2.8.5/ 阿里文档: EMR里可以通过 Ranger组件来实现https://help.aliyun.co ...

  6. 牛客小白月赛14 -G (筛法)

    题目链接:https://ac.nowcoder.com/acm/contest/879/G 题意:给定A1和A数组公式: 以及B数组: 求 思路:利用筛法更新b数组,最后求异或和即可. AC代码: ...

  7. Linux的桌面环境gnome、kde、xfce、lxde 等等使用比较

    如果不是加入了图形界面,微软的Windows系列操作系统不会成功地占领计算机桌面这块高地.这种人机交换的图形化界面,使得界面更加直观.简易.而且更人性化,同时也大大减少了使用者的认知负担,普通用户无需 ...

  8. HanLP-实词分词器详解

    在进行文本分类(非情感分类)时,我们经常只保留实词(名.动.形)等词,为了文本分类的分词方便,HanLP专门提供了实词分词器类NotionalTokenizer,同时在分类数据集加载处理时,默认使用了 ...

  9. MySql在win10上的安装(压缩版)

    一.下载: 二.下载zip版,免安装版的. 三.解压缩后,注意:文件夹名称不能包含[空格] C:\MySQL 四.增加环境变量 五.手动在安装目录  C:\MySQL 下新建一个my.ini写入以下内 ...

  10. JAVA验证

    1.一个JAVA类只能有一个主类. 2.main()方法返回值改为int,不能运行 3.变量作用域有限 实例: 4.数值类型在内存中直接存储其本身的值,对于不同的数值类型,内存中会分配相应的大小去存储 ...