欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2020-10-10 22:23:29|栏目:vue|点击:

修改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 时间 刷新本页面

上一篇:Element InputNumber计数器的使用方法

栏    目:vue

下一篇:vue-cli项目配置多环境的详细操作过程

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

本文地址:http://www.codeinn.net/misctech/9559.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有