也算是踩到坑了,但不是我踩到的,不过还是得说下这个问题,很严重,对于小白和初学者是比较有帮助的,如果使用到路由传参,请选择你想要的传参方式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. jdk 1.8中的list排序

    首先看看collections实现 public static <T> void sort(List<T> list, Comparator<? super T> ...

  2. CnPack 开源软件项目

    Cnpack公共窗体库 ------------------------------ CnPack 2009-09-14 SVN 包,包括以下内容: 1. CnPack 组件包所有源代码.2. CnP ...

  3. 转:async异步、thread多线程

    很全面的知识,转来留着 1:https://www.cnblogs.com/xibei/p/11826498.html 2:https://www.cnblogs.com/xibei/p/118742 ...

  4. (转)shell脚本使用curl获取访问网站的状态码

    curl -I -m 10 -o /dev/null -s -w %{http_code} www.baidu.com -I 仅测试HTTP头-m 10 最多查询10s-o /dev/null 屏蔽原 ...

  5. 用IDEA开发Spring程序

    操作步骤 https://www.cnblogs.com/zyx110/p/11023218.html

  6. CDH6.2的配置

    访问node1: 192.168.56.11:7180 Username: admin Password: admin#进入欢迎界面 Welcome--Accept License 选免费版 Add ...

  7. C# while循环及for循环,for循环的嵌套,冒泡循环

    循环四要素:初始条件.循环条件.循环体.状态改变 初始条件:开始进入循环 所需要的 第一次条件 循环条件:执行循环所需要满足的条件 循环体:每次循环要执行的代码 状态改变:执行完当前循环体后 循环条件 ...

  8. PostgreSQL查询数据库中包含某种类型的表有哪些

    and c.relnamespace = n.oid and nspname = 'public' and a.atttypid = t.oid and typname = 'TEXT' and c. ...

  9. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  10. java this的作用

    this: 区分成员变量和局部变量的重名问题,this.name指的是类中的成员变量,而不是方法内部的