关于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携带参数方式 // 路由配置 { ...
随机推荐
- 根据XML文件 生成 java类
最近一直在做关于webservice 的项目,这种项目最麻烦的就是根据对方的要求产生XML,文档里面虽然有XML结构,但是要转化为java里面的实体实在费劲, 有个自动化的工具就好了,半自动化也好,省 ...
- Elasticsearch mapping映射文件设置没有生效
Elasticsearch mapping映射文件设置没有生效 问题背景 我们一般会预先创建 Elasticsearch index的 mapping.properties 文件(类似于MySQL中的 ...
- [iOS]UIWebView返回和NSURLErrorDomain-999
1.UIWebView实现返回不崩溃: -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)r ...
- java:shiroProject
1.backend_system Maven Webapp: LoginController.java: package com.shiro.demo.controller; import org ...
- 【学习笔记】使用python将最新的测试报告以附件的形式发到指定邮箱
import smtplib, email, os, timefrom email.mime.multipart import MIMEMultipartfrom email.mime.text im ...
- 白盒测试笔记之:testng 单元测试
前言 前一篇文章我们简单了解了下单元测试的概念以及使用junit进行入门了. 但想更好做自动化测试,还是得了解下testng,毕竟,作为一名技术人,NG(下一代)的测试框架总得了解与跟进. testn ...
- Leetcode之广度优先搜索(BFS)专题-752. 打开转盘锁(Open the Lock)
Leetcode之广度优先搜索(BFS)专题-752. 打开转盘锁(Open the Lock) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary ...
- python selenium API 常用方法
配置使用环境 下载相应的浏览器驱动, Firefox 是默认的 本文以 chrome 为主 ,放在scripts目录下ChromeDriver 官方下载地址 : 所有版本的 ChromeDriver ...
- 算法 - k-means++
Kmeans++算法 Kmeans++算法,主要可以解决初始中心的选择问题,不可解决k的个数问题. Kmeans++主要思想是选择的初始聚类中心要尽量的远. 做法: 1. 在输入的数据点中随机选 ...
- vs2019编译opencv
序 微软家的宇宙第一ide:visual studio已经更新到了2019版,芒果也更新尝鲜了一遍,体验还不错,建议更新尝尝鲜.芒果顺便使用vs2019编译了一遍opencv,编译过程也非常顺利,以下 ...