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

    The Counting Problem 询问区间\([a,b]\)中\(1\sim 9\)出现的次数,0 < a, b < 100000000. 解 显然为数位递推,考虑试填法,现在关键 ...

  2. java6大原则之单一职责原则,里式替换原则

    单一职责原则:一个接口,一个类,一个方法,最好只做一类事,当然,在真实的项目中,一系列因素下,很难做到单一职责原则,但是针对接口是可以做到的,方法和类要尽量做到 里式替换原则:父类出现的地方,换成子类 ...

  3. Flask框架图

  4. Orika JavaBean映射工具探秘

    Orika是一个简单.快速的JavaBean拷贝框架,Orika使用字节代码生成来创建具有最小开销的快速映射器. 关于: 作为开发人员,我们必须为业务问题提供解决方案,我们希望利用我们的时间来做真正重 ...

  5. luoguP1890 gcd区间 [st表][gcd]

    题目描述 给定一行n个正整数a[1]..a[n]. m次询问,每次询问给定一个区间[L,R],输出a[L]..a[R]的最大公因数. 输入输出格式 输入格式: 第一行两个整数n,m. 第二行n个整数表 ...

  6. sudo: /etc/sudoers is world writable|给用户添加权限报错

    给用户添加权限时候出现:sudo: /etc/sudoers is world writable| sudo: /etc/sudoers is world writable解决方式: pkexec c ...

  7. AFO成功

    在dcoi一年多,还是发生了不少事情. 过程中也有些小遗憾,有做错的事情,有搞砸的事情,有没办法挽回的事情,这种没法读档的辣鸡游戏也是无可奈何的.对所有被我搞砸的事情说声对不起啦,至少在下一次的时候, ...

  8. ~/.bashrc的常用alias设置,30 个方便的 Bash shell 别名

    centos6.5/centos7系统中,alias定义在/etc/bashrc,分别写在/etc/profile.d/*.sh中,可以在此目录添加my.sh,或者~/.bashrc,或者~/.bas ...

  9. RPC远程过程调用实例详解

    1.创建IDL文件,定义接口. IDL文件可以由uuidgen.exe创建. 首先找到系统中uuidgen.exe的位置,如:C:\Program Files\Microsoft Visual Stu ...

  10. 大半宿,封装了一个MP3播放器的类,写了个简陋的播放器

    用 winmm.lib 写的 封装不是很好,而且没有优化,效率可能有问题,但是现在几乎没有什么大问题 我用我封装的类,写了一个小播放器,界面上的所有功能都实现了,包括双击列表中的文件名,直接播放文件 ...