通过this.$router.push跳转同一路由页面只会刷新一次的问题怎么解决

一、原因

Vue Router默认会认为同一路由之间的跳转是相同路由的导航，所以不会触发组件的重新渲染。

当我们连续重复跳转相同的路由导航时就会报错如：

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/homePage".

我们可以手动捕获错误：在this.$router.push的Promise链中添加一个.catch()来捕获这个错误并处理它，例如给出一个警告。

this.$router.push('/homePage').catch(err => {
   
  if (err.name !== 'NavigationDuplicated') {
   
    throw err;
  } else {
   
    console.log('NavigationDuplicated error caught:', err);