vue切換路由時報錯 uncaught(in promise) Navigation Duplicated 問題

問題描述：采用vue+element 框架搭建的管理系統，導航處沿用element框架里面自帶的，代碼如下：

 <el-container>
     <el-header>
         <div class="header-left">xx管理系統</div>
         <div class="header-rght">
              <div class="header-rght-userinfo"></div>
              <div class="header-rght-username">xxx</div>
         </div>
      </el-header>
      <el-container>
          <el-aside width="280px">
               <el-row>
                   <el-col :span="12">
                       <el-menu :default-active="currentIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                           <el-menu-item index="1" @click="$router.push('跳轉路徑一')">
                               <span slot="title">導航一</span>
                           </el-menu-item>
                           <el-menu-item index="2" @click="$router.push('跳轉路徑二')">
                               <span slot="title">導航二</span>
                           </el-menu-item>
                           <el-menu-item index="3" @click="$router.push('跳轉路徑三')">
                               <span slot="title">導航三</span>
                           </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
          </el-aside>
          <el-main>
              <router-view></router-view>
          </el-main>
      </el-container>
 </el-container>

當點擊左側導航欄的某一導航，例如：點擊導航一時，右側對應顯示該導航一的內容。這時，再次點擊導航一，就會報下圖錯誤的內容。

附報錯圖片一張：

 

 解決辦法：

     法一：把項目依賴的 node_modules 文件夾刪除，然后再 npm install  重新下載依賴包就可以了。

     法二：如果在重新下載依賴包時，安裝的 vue-router還是之前出錯的那個版本，那么要怎么解決呢？即 在項目目錄下運行  npm i vue-router@3.0 -S 。

     法三：如果不想換 vue-router的版本或者還是沒有用，可以在main.js 或者router.js 文件下添加一下代碼：    

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
     return originalPush.call(this, location).catch(err => err)
}

             我是采用的第三種方法，親測有效。附原文鏈接：https://blog.csdn.net/hgs_5683/article/details/101027580