问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个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的更多相关文章

  1. <jsp:param>传参乱码问题

    在添加参数的界面添加<%request.setCharacterEncoding("UTF-8");%> 实例代码: login_confirm.jsp <%@ ...

  2. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  3. Vue的组件及传参

    目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...

  4. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  5. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

  6. Vue.js中组件传参的方法 - 基于webpack模板

    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...

  7. Vue配置路由和传参方式及路由守卫!

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  8. vue路由传参并跳转页面

    在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单 方式一:query传参 //传参 go(){ that.$router.push ...

  9. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

随机推荐

  1. css---文本新增样式

    opacity属性指定了一个元素的透明度 默认值:1.0 不可继承    兼容性不是太好 兼容性写法 opacity{ opacity:0.5; filter:alpha(opacity=); //f ...

  2. 【JZOJ5433】图

    description 有一个n个点A+B条边的无向连通图,有一变量x,每条边的权值都是一个关于x的简单多项式,其中有A条边的权值是k+x,另外B条边的权值是k-x,如果只保留权值形如k+x的边,那么 ...

  3. 【JZOJ6288】旋转子段

    description analysis 可以先用前缀和把原串不调整的方案数先求出来 对于一种翻转,肯定是把\([i..a[i]]\)或\([a[i]..i]\)这段区间翻转 也可以看做是以\({i+ ...

  4. JavaScript - 常用对象相关

    1. String对象 length : 字符串的长度 charAt(index) : 返回指定位置的字符串, 下标从0开始 indexOf(str) : 返回指定的字符串在当前字符串中首次出现的位置 ...

  5. duilib教程之duilib入门简明教程10.界面设计器 DuiDesigner

    上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便.    所以这一章准备介绍duilib的UI设计器,由于这个设计器很不完善,也 ...

  6. 框架:Flutter(移动应用程序开发框架)

    ylbtech-框架:Flutter(移动应用程序开发框架) Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作. ...

  7. 解决方案 -SQL脚本建表产生ORA-00942错误

    一.问题简介 1.开发环境 操作系统:win10 数 据 库:Oracle11g 数据库连接工具:Navicat  Premium 2.问题简述 在使用SQL Development.Navicat  ...

  8. C#winfrom listview 设置显示图片

    ListView控件有5种显示图片方式:LargeIcon(大图标),Detail(详细),SmallIcon(小图标),List(列表),Tile,常用前4种.  这里说一下设置方式:LargeIc ...

  9. python调用scikit-learn机器学习

    不支持深度学习和强化学习 numpy介绍: np.eye(n)生成一个n维单元数组 数据预处理: iris数据加载 from sklearn import datasetsiris = dataset ...

  10. TKmybatis的框架介绍和原理分析及Mybatis新特性演示

    tkmybatis是在mybatis框架的基础上提供了很多工具,让开发更加高效,下面来看看这个框架的基本使用,后面会对相关源码进行分析,感兴趣的同学可以看一下,挺不错的一个工具 实现对员工表的增删改查 ...