关于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携带参数方式 // 路由配置 { ...
随机推荐
- RxJava2实战--第八章 RxJava的背压
RxJava2实战--第八章 RxJava的背压 1 背压 在RxJava中,会遇到被观察者发送消息太快以至于它的操作符或者订阅者不能及时处理相关的消息,这就是典型的背压(Back Pressure) ...
- 外国前端收费模板wrapbootstrap
https://wrapbootstrap.com/ 新闻模板 http://wrapbootstrap.com/preview/WB037B6R2
- lxml的XPath解析
BeautifulSoup 可以将lxml作为默认的解析器使用,同样lxml可以单独使用.下面比较这两者之间优缺点: BeautifulSoup和lxml原理不一样,BeautifulSoup是基于D ...
- 不可不知的JavaScript - 闭包函数
闭包函数 什么是闭包函数? 闭包函数是一种函数的使用方式,最常见的如下: function fn1(){ function fn(){ } return fn; } 这种函数的嵌套方式就是闭包函数,这 ...
- swoole前置基础知识 进程间通信
进程间通信(IPC,InterProcess Communication)是指在不同进程之间传播或交换信息. IPC的方式通常有管道(包括无名管道和命名管道).消息队列.信号量.共享存储.Socket ...
- wms、wmts和wfs的区别
Web地图服务(WMS)利用具有地理空间位置信息的数据制作地图.其中将地图定义为地理数据可视的表现.这个规范定义了三个操作:GetCapabilities返回服务级元数据,它是对服务信息内容和要求参数 ...
- nginx reload的原理
nginx启动时,会启动两个进程: 一个是Master进程和worker进程.改变配置后nginx做的事1)改变了nginx配置之后,HUP signal的信号需要发送给主进程.2)主进程首先会检测新 ...
- 【Python开发】Python之re模块 —— 正则表达式操作
Python之re模块 -- 正则表达式操作 这个模块提供了与 Perl 相似l的正则表达式匹配操作.Unicode字符串也同样适用. 正则表达式使用反斜杠" \ "来代表特殊形式 ...
- java 实现读取某个目录下指定类型的文件
我这里是读取txt类型的文件,在指定的目录下有不同类型的文件 实现代码,读取txt类型的文件并打印出该文件的绝对路径 package com.SBgong.test; import java.io.F ...
- 水晶报表和rdlc报表传入参数筛选
在使用报表向客户展示结果数据时,实时的在报表中显示某些特定的数据是必需的,如:显示的部门.打印的日期等.本文只简单的演示向报表内传入一个字符值. 以下是设计好报表之后传入参数的具体操作 一.首先是水晶 ...