关于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携带参数方式 // 路由配置 { ...
随机推荐
- java解析和组装json以及一些方法的理解
这是一个json格式的字符串 第一种情况(简单格式) String result = "{\"name\":\"小明\",\"age\&qu ...
- react中递归生成列表
import React, {Component} from 'react'; import { Menu, Icon } from 'antd'; import {Link} from 'react ...
- Linux C/C++基础——内存分区
1.内存分区 在生活中,为了提高办事效率,某个单位经常会分成N个部门,每个部门职责不同,同样,为了提高 效率,我们的内存也会被分成N个区.这里我们将内存分为五个区.也有四区模型. 首先看一下一个二进制 ...
- 论文阅读 | Combating Adversarial Misspellings with Robust Word Recognition
对抗防御可以从语义消歧这个角度来做,不同的模型,后备模型什么的,我觉得是有道理的,和解决未登录词的方式是类似的,毕竟文本方面的对抗常常是修改为UNK来发生错误的.怎么使用backgroud model ...
- 开启httpfs
参考: https://docs.cloudera.com/documentation/enterprise/6/6.2/topics/admin_httpfs.html#xd_583c10bfdbd ...
- Ubuntu关机等待时间解决方案
关于GDM问题(a stop job is running for session c1 of user root 1 min 30 s) 注意了,这个不是系统的问题,是配置的问题.鼓捣了老久才找出来 ...
- Python学习【day03】- Python基础练习题(列表、元组、字典)
#!/usr/bin/env python # -*- coding:utf8 -*- # 1.有两个列表 # l1 = [11,22,33] # l2 = [22,33,44] # a.获取内容相同 ...
- Go语言中的数组(九)
我刚接触go语言的数组时,有点不习惯,因为相对于JavaScript这样的动态语言里的数组,go语言的数组写起来有点不爽. 定义数组 go语言定义数组的格式如下: ]int var 数组名 [数组长度 ...
- 最短meeting路线(树的直径)--牛客第四场(meeting)
题意: 给你一棵树,树上有些点是有人的,问你选一个点,最短的(最远的那个人的距离)是多少. 思路: 其实就是树的直径,两遍dfs,dfs第二遍的时候遇到人就更新直径就行了,ans是/2,奇数的话+1. ...
- Postman之获得登录的token,并设置为全局变量
1.调通登录接口(可以参考上篇博客) 网址:Postman之简单使用 2.粘贴以下代码到Tests中 //把json字符串转化为对象 var data=JSON.parse(responseBody) ...