// 总的来说两个问题
// 1.路由重复点击报红错误
// 解决方法:重写push方法,cathc掉错误,就不显示了
// 2.路由重复点击栈溢出
// 在beforEach方法里,判断重复路由,就next(false)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld1 from '@/components/HelloWorld1'
import EchartsAll from '@/components/EchartsAll'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/hh/:id',
// name: 'HelloWorld',
component: HelloWorld,
props: true
},
{
path: '/ww',
name: 'HelloWorld1',
component: HelloWorld1
},
{
path: '/map',
name: 'EchartsAll',
component: EchartsAll
}
]
})
// 总的来说两个问题
// 1.路由重复点击报红错误
// 解决方法:重写push方法,cathc掉错误,就不显示了
// 2.路由重复点击栈溢出
// 在beforEach方法里,判断重复路由,就next(false)
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
console.log(145454545)
return originalPush.call(this, location)
// 其实这里没解决掉重复问题,只是trycatch掉了....
// 去掉catch一样报错
.catch(err => err)
}
// app.vue里注意,router-link不会触发重复问题
// this.$router.push才能触发
// 之后push方法执行之后,才会接着执行beforeEach方法.....
// 看打印就知道,重复进一个路由的时候
router.beforeEach((to, from, next) => {
console.log(2454545)
console.log(to, from)
// 解决路由栈溢出问题
// next('/asdfdsa') 不同于next()
// 这种传参的写法,每次都会触发路由拦截,所以如果不排除
// 重复的,就会一直栈溢出
// 所以这里要排除一下重复的
if (to.path === from.path) {
next(false)
} else {
next()
}
})
router.onError((error) => {
console.log('有错误,', error)
})
export default router