问题:

  在做项目的过程中,使用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. 爬虫之cookie与代理

    一, 基于requests模块的cookie操作 引言:有些时候,我们在使用爬虫程序去爬取一些用户相关信息的数据(爬取张三“人人网”个人主页数据)时,如果使用之前requests模块常规操作时,往往达 ...

  2. PLC编程的基础知识的总结

    1.Programmable Logic Controller   PLC 代替计算机实现复杂的逻辑控制系统  ,可编程控制器是一种数字运算操作电子系统,转门在工业控制系统中使用而设计的,采用一种可以 ...

  3. kubernetes-使用Nginx配置ingress-controllers

    下载 Nginx Ingress Controller 配置文件: wget https://raw.githubusercontent.com/kubernetes/ingress-nginx/ma ...

  4. React中的State与Props

    一.State 1.什么是 state 一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props 2.state 的使用 组件初始化时,通过 this.st ...

  5. DevExpress20:XtraCharts控件实现图表

    一.总体概述 官方文档: https://docs.devexpress.com/WindowsForms/8117/controls-and-libraries/chart-control Char ...

  6. 行为型模式(六) 状态模式(State)

    一.动机(Motivate) 在软件构建过程中,某些对象的状态如果改变,其行为也会随之而发生变化,比如文档处于只读状态,其支持的行为和读写状态支持的行为就可能完全不同.   如何在运行时根据对象的状态 ...

  7. Python程序格式规范

    Python是一种计算机编程语言.计算机编程语言和我们日常使用的自然语言有所不同,最大的区别就是,自然语言在不同的语境下有不同的理解,而计算机要根据编程语言执行任务,就必须保证编程语言写出的程序决不能 ...

  8. Spring框架的核心功能之AOP技术

     技术分析之Spring框架的核心功能之AOP技术 AOP的概述        1. 什么是AOP的技术?        * 在软件业,AOP为Aspect Oriented Programming的 ...

  9. set/priority_queue的运算符重载

    #include<bits/stdc++.h> using namespace std; struct cmp { bool operator ()(int a, int b) //重载小 ...

  10. HDFS节点及原理

    HDFS节点角色: (1)namenode:1.用来存储HDFS的元数据信息,这里的元数据信息指的是文件系统的命名空间.启动时,将这些信息加载到namenode内存. 2.元数据信息也会在磁盘上保存成 ...