给一个元素绑定跳转路由的事件时,跳转后当我们重复点击时就会报以下错误:
原因: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