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) }

             我是採用的第三種方法，親測有效。附原文連接：http://www.javashuo.com/article/p-fcpnkawq-me.html