vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)
问题:
在做项目的过程中,使用query传参数,发现跳转过程中第一次有参数,但是路由马上又跳转了一次,然后 ?和它之后的参数都不见了
问题分析:
因为路由加载了两次
解决办法:
·1. 找到总的 layout.vue 组件,查看监听路由的代码,果然是因为我又重新push了一次路由导致的
watch:{ //监听路由变化
'$route.path': function (newVal, oldVal) {
if (newVal !== oldVal) {
this.$router.push(newVal) // 重新加载了一个新路由
}
}
},
删掉这行代码,就可以啦!!!
vue-router 使用query传参跳转了两次(首次带参数,跳转到了不带参数)的更多相关文章
- vue params和query传参区别
参考地址:https://blog.csdn.net/bluefish_flying/article/details/81011230 router.js中 路由设置这里, 当你使用params方法传 ...
- Vue Router的params和query传参的使用和区别
vue页面跳转有两种方式分别是:name和path this.$router.push({name: 'HelloWorld2}) this.$router.push({path: '/hello-w ...
- (转)vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- vue router 如何使用params query传参,以及有什么区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue父子组件路由传参的方式
一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...
- vue:解决使用param传参后,再次刷新页面会新增一个原有的tab
问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- vue router使用query和params传参的使用
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,希望可以帮到大家. Vue ...
随机推荐
- Python_变量作用域
1.变量作用域: def get_apple(name,*b): global totalCount totalCount=0 for num in b: print('............... ...
- Apache的虚拟主机
一.虚拟主机的分类 基于IP的虚拟主机:一台服务器,多个ip,搭建多个网站 基于端口的虚拟主机:一台服务器,一个ip,利用不同端口,搭建多个网站 基于域名的虚拟主机:一台服务器,一个ip,多个域名,搭 ...
- mysql 5.6 rpm安装启动、配置参数、字符集修改等
linux 7 安装mysql server 注意:此mysql版本是el6 MySQL-server-5.6.35-1.el6.x86_64 一.安装部署: 1.yum:首先要配置yum源,yum安 ...
- 图解TCP/IP笔记
- jdk1.6文档官方下载资源
JDK1.6官方下载_JDK6官方下载地址:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin- ...
- 微信支付(APP支付)-服务端开发(二 )
如果你已经可以微信支付成功,那么你已经成功90%,剩下的就是订单确认问题了. 接上一篇文章,今天我们来谈一谈,订单查询与确认: APP端支付成功之后,会再次向服务端发起请求,确认付款订单时候成功,同时 ...
- SignalR2实时聊天
SignalR2实时聊天 NuGet包中搜索SignalR添加引用 using Microsoft.AspNet.SignalR; 创建OWIN启动类 namespace SignalRChat { ...
- PHP 高手博客网站集合
风雪之隅-Laruence的博客 韩天峰(Rango)的博客 我的志愿是做一个校长 张宴的博客 - Web系统架构与底层研发 沈逸的个人站点 博学无忧 - 信海龙的博客
- 洛谷 P5461 赦免战俘 题解
P5461 赦免战俘 题目背景 借助反作弊系统,一些在月赛有抄袭作弊行为的选手被抓出来了! 题目描述 现有 \(2^n\times 2^n (n\le10)\) 名作弊者站成一个正方形方阵等候 kkk ...
- BZOJ 1406: [AHOI2007]密码箱
二次联通门 : BZOJ 1406: [AHOI2007]密码箱 /* BZOJ 1406: [AHOI2007]密码箱 数论 要求 x^2 ≡ 1 (mod n) 可以转换为 x ^ 2 - k * ...