vue跳转同一路由报错的问题及解决

目录

• vue跳转同一路由报错
• 编程式路由跳转多次点击报错问题
• 问题分析
• 解决方法
• 总结

vue跳转同一路由报错

vue中，如果跳转同一个页面路由，虽不会影响功能，但是会报错

原因：路由的push会向历史记录栈中添加一个记录，同时跳转同一个路由页面，会造成一个重复的添加，导致页面的报错

解决方案：在router的index.js中重写vue的路由跳转push

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err);
}

编程式路由跳转多次点击报错问题

使用编程式路由进行跳转时，控制台报错，如下所示。

问题分析

该问题存在于Vue-router v3.0之后的版本，由于新加入的同一路径跳转错误异常功能导致。

解决方法

重写 $router.push 和 $router.replace 方法，添加异常处理。

//push
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

//replace
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
  return VueRouterReplace.call(this, to).catch(err => err)
}

示例

    
    
    


    

        Page First
        Page Second
        
    
 

    
    
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。