vue router 的 Uncaught (in promise) 问题

升级到Vue-Router版本到3.1.0及以上之后,页面在跳转路由时如果重复点击,会报Uncaught (in promise)的问题,虽然没什么影响,但是看起来还是很不舒服。
代码如下

<template>
  <div id="app">
      <div>
        <button @click="homeClick">Home</button>
	    <button @click="aboutClick">About</button>
      </div>
      <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
	    homeClick() {
            this.$router.push('/');
	    },
        aboutClick(){
		    this.$router.push('/about').catch(err => {});
	    }
    }
}
</script>

原因

V3.1.0版本里面新增功能:push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常(来源CSDN)

解决

在调用方法的时候用catch捕获异常,以下是修改后的代码

<template>
  <div id="app">
      <div>
        <button @click="homeClick">Home</button>
	    <button @click="aboutClick">About</button>
      </div>
      <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
    // HelloWorld
  },
    methods:{
		homeClick() {
            this.$router.push('/').catch(err => {});
		},
		aboutClick(){
			this.$router.push('/about').catch(err => {});
		}
    }
}
</script>

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!

vue cli 解决跨域 线上 nginx 反向代理配置 上一篇
Hexo博客搭建 下一篇