解决Vue路由重复跳转报错
解决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条内容
所有评论(0)