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

 更新时间:2020年08月07日 08:41:10   作者:jkdgvse  
这篇文章主要介绍了vue-router重写push方法,解决相同路径跳转报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

修改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方法,解决相同路径跳转报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现可拖拽的dialog弹框

    vue实现可拖拽的dialog弹框

    element的dialog弹框在项目中挺常用的。拖拽形式的弹框会提高用户体验,本文实现了vue可拖拽的dialog弹框,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue实现分页栏效果

    vue实现分页栏效果

    这篇文章主要为大家详细介绍了vue实现分页栏效果,分页栏设计的步骤与实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 浅谈使用mpvue开发小程序需要注意和了解的知识点

    浅谈使用mpvue开发小程序需要注意和了解的知识点

    这篇文章主要介绍了浅谈使用mpvue开发小程序需要注意和了解的知识点,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue3编写带提示的表格组件功能

    vue3编写带提示的表格组件功能

    本文介绍了如何使用Vue 3编写一个带提示的表格组件,并假设每行都有一个保存按钮,如果需要全部保存,还会加上验证,感兴趣的朋友一起看看吧
    2025-02-02
  • vite创建vue3项目页面引用public下js文件失败解决办法

    vite创建vue3项目页面引用public下js文件失败解决办法

    Vue3相较于之前的版本有了不少变化,如引用全局Js文件,这篇文章主要给大家介绍了关于vite创建vue3项目页面引用public下js文件失败的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue3中实现过渡动画的方法小结

    Vue3中实现过渡动画的方法小结

    这篇文章主要为大家详细介绍了Vue3中实现过渡动画的一些常用方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-10-10
  • Vue安装与使用

    Vue安装与使用

    Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能!下面来看看其得安装及使用方法吧
    2021-10-10
  • vue实现吸顶、锚点和滚动高亮按钮效果

    vue实现吸顶、锚点和滚动高亮按钮效果

    这篇文章主要介绍了vue实现一个简单的吸顶、锚点和滚动高亮按钮效果,需要的朋友可以参考下
    2019-10-10
  • Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    这篇文章主要介绍了Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vue项目自动转换 px 为 rem的实现方法

    Vue项目自动转换 px 为 rem的实现方法

    这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法,本文是通过一系列的配置后,转换成热门,具体内容详情大家跟随小编一起通过本文学习吧
    2018-10-10

最新评论