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 相关文章推荐
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
js实现筛选功能
Nov 24 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
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python的装饰器用法学习笔记
2016/06/24 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python求质数的3种方法
2018/09/28 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
国贸专业求职信
2014/06/28 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
元宵节晚会主持词
2015/07/01 职场文书
远程教育学习心得体会
2016/01/23 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript