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

 原因: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

Logo

前往低代码交流专区

更多推荐