问题:

  在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了

问题分析:

  因为路由加载了两次

解决办法:

·1. 找到总的 layout.vue 组件,查看监听路由的代码,果然是因为我又重新push了一次路由导致的

watch:{   //监听路由变化
'$route.path': function (newVal, oldVal) {
if (newVal !== oldVal) {
this.$router.push(newVal) // 重新加载了一个新路由
}
}
},

删掉这行代码,就可以啦!!!

vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)的更多相关文章

  1. vue params和query传参区别

    参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...

  2. Vue Router的params和query传参的使用和区别

    vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...

  3. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  4. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

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

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

  6. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  7. vue:解决使用param传参后,再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  8. Vue的组件及传参

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

  9. vue router使用query和params传参的使用

    传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...

随机推荐

  1. 加密类型、数据加密解密过程以及CA创建

    对称加密算法 对称加密:加密和解密使用同一个密钥 DES:Data Encryption Standard,56bits 3DES: AES:Advanced (, , 256bits) Blowfi ...

  2. 迷你商城后台管理系统————stage1需求分析

    PS:迷你商城后台管理系统---需求分析.docx下载~click me 迷你商城后台管理系统-- 需求分析 1. 引言 作为互联网热潮的崛起,消费者们的普遍差异化,实体商城要想在互联网的浪潮中继续发 ...

  3. nginx添加系统服务(start|stop|restart|reload)

    nginx添加系统服务 1.编写脚本,名为nginx #vim /etc/init.d/nginx #!/bin/bash#chkconfig: - 99 20 #description: Nginx ...

  4. 快速IO

    namespace IO { #define gc() (iS==iT?(iT=(iS=ibuff)+fread(ibuff,1,SIZ,stdin),(iS==iT?EOF:iS++)):iS++) ...

  5. 软件测试技术之可用性测试之WhatsApp Web

    Tag:可行性测试.测试流程.结果分析.案例分析 WhatsApp是一款面向智能手机的网络通讯服务,它可以通过网络传送短信.图片.音频和视频.WhatsApp在全球范围内被广泛使用,是最受欢迎的即时聊 ...

  6. JAVA中使用Dom解析XML

    在G盘下新建XML文档:person.xml,XML代码: <?xml version="1.0" encoding="utf-8"?> <s ...

  7. Kubernetes 学习5 kubernetes资源清单定义入门

    一.kubernetes是有一个restful风格的 API,把各种操作对象都一律当做资源来管理.并且可通过标准的HTTP请求的方法 GET,PUT,DELETE,POST,等方法来完成操作,不过是通 ...

  8. http://www.tldp.org/LDP/abs/abs-guide.txt.gz

    http://www.tldp.org/LDP/abs/abs-guide.txt.gz

  9. python下载图片超时的调查

    在使用python3下载图片时, 常用的方法有urlretrieve和requests两种, 不管哪种方法在网速极慢的情况下, 会出现图片下载卡住现象.那如何解决呢? 小编根据网上提供的资料测试了几种 ...

  10. shell脚本之字符串运算的使用

    字符串运算符 下表列出了常用的字符串运算符,假定变量 a 为 "abc",变量 b 为 "efg": 运算符 说明 举例 = 检测两个字符串是否相等,相等返回 ...