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 相关文章推荐
JavaScript中setAttribute用法介绍
Jul 20 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
php判断字符以及字符串的包含方法属性
2008/08/30 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Django Form常用功能及代码示例
2020/10/13 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
MySQL面试题目集锦
2016/04/14 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
火箭队口号
2014/06/18 职场文书
被告代理词范文
2015/05/25 职场文书