vue:解决使用param传参后,再次刷新页面会新增一个原有的tab
问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab
原来的:

刷新页面后:

查阅资料后,发现该现象是由于通过params进行传递的参数引起的,params进行传参后再次刷新页面,参数丢失,导致fullpath不一致,从而新增了页面(而我使用的d2admin基于element-ui第三方框架)
解决方案:将params方式传参改为使用query传参,这样参数就不会因为刷新而丢失
参考:
https://juejin.im/post/5c139fed6fb9a049ab0d80dc
query和params传参的区别?
- query 传参配置的是path,而params传参配置的是name,在params中配置path无效
- query在路由配置不需要设置参数,而params必须设置
- query传递的参数会显示在地址栏中
- params传参刷新会无效,但是query会保存传递过来的值,刷新不变 ;
如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,那依赖这个参数的http请求或者其他操作就会失败
vue:解决使用param传参后,再次刷新页面会新增一个原有的tab的更多相关文章
- <jsp:param>传参乱码问题
在添加参数的界面添加<%request.setCharacterEncoding("UTF-8");%> 实例代码: login_confirm.jsp <%@ ...
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- Vue.js中组件传参的方法 - 基于webpack模板
在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
- Vue配置路由和传参方式及路由守卫!
安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...
- vue路由传参并跳转页面
在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
随机推荐
- splice用法
splice()方法给数组添加内容,返回新的数组 splice()方法替换数组一项内容,返回新的数组 如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变. 比如:从第 2 位开 ...
- pdfkit
官方文档 0.准备 需要引入两个包,首先要npm install pdfkit安装pdfkit包 const PDF = require('pdfkit'); const fs = require(' ...
- 校园商铺-2Logback配置与使用-2Logback配置
logback配置文件加载顺序 logback:程序在运行的时候,会按照一定的顺序去加载logbook相关的配置文件. 如果我们在配置里面制定了logbackConfigurationFile这个属性 ...
- SpringBoot_05_ssm拦截器和默认欢迎页面的设置
1.在springBoot下通过使用拦截器完成在没有登陆的前提下,不允许访问其他资源 编写拦截器,要实现HandlerInterceptor @Component public class UserI ...
- 软件-开发工具:Gradle
ylbtech-软件-开发工具:Gradle Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具.它使用一种基于Groovy的特定领域语言(DSL)来声明 ...
- ThinkPHP5的简单使用
目录的介绍 thinkphp5 的控制器的创建 第一步:新建一个控制器 第二步:admin.php控制器内容如下 第三步:如何显示模型页面 第四步:显示模板页面 第五步:定义模板变量 第六步:运行结果 ...
- 17.splash_case01
# 抓取今日头条,对比渲染和没有渲染的效果 import requests from lxml import etree # url = 'http://localhost:8050/render.h ...
- neo4j算法(1)-介绍
neo4j为图数据库,其中涉及的也就为图算法,图算法被用来度量图形,节点及关系. 在neo4j中,通过call algo.list() 可查看neo4j中的算法列表. 在neo4j官方文档中,主要记录 ...
- sql server2014显示sa无法登录的错误
博主用的是sql serser2014,不过这个问题的方法也适用于2012等其他版本. 当用sa登录的时候,提示如下错误: A connection was successfully establis ...
- (转)FastCgi与PHP-fpm之间是个什么样的关系
首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...