解决Vue路由重复跳转报错

给一个元素绑定跳转路由的事件时,跳转后当我们重复点击时就会报以下错误:

 原因:vueRouter版本问题,

解决方案1:

使用旧版本的VueRouter   3.0.xxx

 解决方案2:

跳转路径后,捕获异常,不做处理(这类绑定事件若较多,要写好多次catch)

$router.push('/home/search').catch(err=>{ })

 解决方案3(推荐):

在VueRouter上配置路由跳转,在router中的index.js中加上以下代码,注意加在use之前

const routerPush = VueRouter.prototype.push;

VueRouter.prototype.push = function (location) {

    return routerPush.call(this, location).catch(err => {})

};

 完整示例:

import Vue from 'vue'
import VueRouter from 'vue-router'
import infoView from '../view/infoView.vue'
import HomeView from '../components/HomeView.vue'
import theSearch from '../view/theSearch.vue'

const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
    return routerPush.call(this, location).catch(err => {})
};
Vue.use(VueRouter)
const routes = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/home',
    component: HomeView,
    children: [{
        path: '/home/info',
        component: infoView
    }, {
        path: '/home/search',
        component: theSearch
    }, ]
}, ]

const router = new VueRouter({
    routes
})

export default router

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值