zoukankan      html  css  js  c++  java
  • 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

         

  • 相关阅读:
    ssh的配置[待写]
    回文检测题解
    叠积木/银河系英雄传说[NOI2002]题解
    酒店之王解题报告
    摆花解题报告
    摆渡车(noip2018 pj t3)
    NOIP2018 普及 凉凉记
    子矩阵(NOIP2014T4)
    花店橱窗布置(洛谷:P1854)
    我想大声告诉你
  • 原文地址:https://www.cnblogs.com/sunnyeve/p/11961377.html
Copyright © 2011-2022 走看看