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从头学起第三讲
Jul 06 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
jquery $.trim()方法使用介绍
May 21 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 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中文工具类ChineseUtil
2018/02/23 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python绘制热力图示例
2019/09/27 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python实现弹球小游戏
2020/08/01 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
高中运动会入场词
2014/02/14 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
卫生巾广告词
2014/03/18 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
医院保洁服务方案
2014/06/11 职场文书
调解书格式范本
2015/05/20 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL