在vue项目中,如果使用$router.push跳转到一个相同的路由就会报错.原因是由于
vue-router在3.1.0版本之后,push和replace方法会返回一个promise对象,如果跳转到相同的路
由,就报promise uncaught异常.
为了避免这种报错可以通过修改vue-router的配置文件,默认位置router/index.js;配置方式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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: '/' ,
}
]
})
|