vue-router重写push方法,解决相同路径跳转报错问题


Posted in Javascript onAugust 07, 2020

修改vue-router的配置文件,默认位置router/index.js

import Vue from 'vue'
import Router from 'vue-router'
 
/**
 * 重写路由的push方法
 * 解决,相同路由跳转时,报错
 * 添加,相同路由跳转时,触发watch (针对el-menu,仅限string方式传参,形如"view?id=5")
 */
 
// 保存原来的push函数
const routerPush = Router.prototype.push 
// 重写push函数
Router.prototype.push = function push(location) {
 
 // 这个if语句在跳转相同路径的时候,在路径末尾添加新参数(一些随机数字)
 // 用来触发watch
 if(typeof(location)=="string"){
 var Separator = "&";
 if(location.indexOf('?')==-1) { Separator='?'; }
 location = location + Separator + "random=" + Math.random();
 }
 
 // 这个语句用来解决报错
 // 调用原来的push函数,并捕获异常
 return routerPush.call(this, location).catch(error => error)
}
 
Vue.use(Router)
export default new Router({
 routes: [
 {
  path: '/',
 
 }
 ]
})

补充知识:vue router-link 路径变化 页面内容不变

在VUE项目中有碰到过,vue 同一 路由页面 用router-link 或者 router.push() 访问同一路由页面,出现url地址有变化,但是页面内容没有变化,没有重新加载信息

解决方案如下

<router-link to="/home" @click.native="flushCom">首页</router-link>
<script>  
export default {
...
...
methods:{
 flushCom:function(){
 //router是路由实例,例如:var router = new Router({})
  //router.go(n)是路由的一个方法,意思是在history记录中前进或者后退多少步,0就表示还是当前,类似window.history.go(n)
 this.$router.go(0); 
 }
}
}
<script>

等于在router 链接 触发后 再通过click 时间 刷新本页面

以上这篇vue-router重写push方法,解决相同路径跳转报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 #Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 #Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 #Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python实现斐波那契递归函数的方法
2014/09/08 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
会议邀请函范文
2014/01/09 职场文书
高二英语教学反思
2014/01/19 职场文书
大学生找工作求职信
2014/07/09 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
学生考试舞弊检讨书
2015/01/01 职场文书
超市采购员岗位职责
2015/04/07 职场文书
项目备案申请报告
2015/05/15 职场文书
呼兰河传读书笔记
2015/06/30 职场文书