为什么mounted()内直接使用this.$router.push()会报错?

1.我写了一个公共的脚部组件,分别可以跳转到4个页面,这4个页面都调用的这个公共的脚部组件。
1

2.当我F5刷新页面时,不管高亮的是那个页面(比如我在购物车页面),我想让他都回到首页,并且在脚部组件中高这首页这个按钮。因为刷新后state中的clicked的值会默认为0,这时我就想跳到首页。这样就不会出现高亮菜单和页面对应不上的情况。
2

3.但是这样写了以后,会报错

请问大神这里怎么解决

可以在公共组件里去处理,没必要在业务组件中处理。

我就是在公共的脚部组件中处理的。

vue-router 版本多少?

vue-router3.1.x 会有这样的问题。解决方法是:

  1. 降到 3.1.0 以下版本
  2. this.$router.push('/location').catch(err => {}) 捕获错误

“vue-router”: “^3.0.1”,
感觉不是这个的问题

5
还是报的这个错误。

那就降级吧。。。。。

我的版本不高呀。你说的是3.1.x,而我的是3.0.1

使用window.location.href=XXX
来跳转。

目测你这个bug是你在首页刷新导致的,因为在首页的时候clicked == 0是恒成立的,然后push,再进入首页,再push。。。。所以会有NavigationDuplicated问题。

跳转页面应该在router的导航守卫里面进行判断是否跳转。
参考:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

PS:你要做的应该是缓存store,刷新时恢复store里面的数据从而避免出现高亮和页面对应不上的问题

1 Like

感谢,确实是你说的这个问题。我多做了一个判断就实现了,没有出现报错。

这是我改的,希望对遇到同样问题的小伙伴有帮助。
mounted() {
console.log(this.$route)
//因为刷新页面,脚部高亮菜单的菜单和页面对应不上,所以统一改为首页
if(this.$route.path!=’/’&&this.$store.state.clicked==‘0’){
this.$router.push({path: ‘/’})
}
},

跳转处理最好写在 router.beforeEach里面,还有那nav图标对应可以在routes.meta加一个字段