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

    Ⅰ.三角数字 首先我们来看一组数字:1,3,6,10,15,21.....,在这个数列中第n项是由n-1项加n得到的,这个序列中的数字称为三角数字因为他们可以形象化地表示成一个三角形排列.如下图 通过 ...

  2. leetcode-47-全排列②

    题目描述: 方法一:回溯 class Solution: def permuteUnique(self, nums: List[int]) -> List[List[int]]: #nums = ...

  3. Linux tee命令使用详解分享

    tee命令主要被用来向standout(标准输出流,通常是命令执行窗口)输出的同时也将内容输出到文件,下面是tee的man 信息 read from standard input and write ...

  4. SpringCloudBus

    不重启微服务的情况下更新配置 配置服务端 tensquare_config配置依赖 <dependency> <groupId>org.springframework.clou ...

  5. 配置类一@CrossOrigin

    @CrossOrigin是用来处理跨域请求的注解 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制. 所谓同源是指,域名,协议,端口 ...

  6. kubernetes istio之流量管理

    1.部署 Bookinfo 应用 要在 Istio 中运行这一应用,无需对应用自身做出任何改变.我们只要简单的在 Istio 环境中对服务进行配置和运行,具体一点说就是把 Envoy sidecar ...

  7. DNS的解析过程

    1.什么是DNS 在互联网上,唯一标识一台计算机的是IP地址,但是IP地址不方便记忆,通过一个域名对应一个IP地址,来达到找到IP地址的目的,那么DNS就是将域名转换成IP地址的过程. 2.DNS查询 ...

  8. mysql索引原理深度解析

    mysql索引原理深度解析 一.总结 一句话总结: mysql索引是b+树,因为b+树在范围查找.节点查找等方面优化 hash索引,完全平衡二叉树,b树等 1.数据库中最常见的慢查询优化方式是什么? ...

  9. HDU-3068-最长回文-马拉车算法模板题

    给出一个只由小写英文字符a,b,c...y,z组成的字符串S,求S中最长回文串的长度. 回文就是正反读都是一样的字符串,如aba, abba等 Input输入有多组case,不超过120组,每组输入为 ...

  10. springboot新手脱坑之无法下载依赖包

    1. Apache maven 3.39配置 1.环境变量自己配置, 2.配置阿里云镜像和本地仓库 <localRepository>D:\Apache\maven\repository& ...