ElementUI 내 비게 이 션 메뉴 를 사용 하여 오류 해결 방법 을 반복 클릭 합 니 다.

10615 단어 Vue
element 탐색 메뉴 탭 사용
<el-menu 
    router 
    :default-active="$route.path" 
    class="el-menu-vertical-demo">
    <el-menu-item index="/home">
        <span slot="title" class="">
                Home
        span>
    el-menu-item>
el-menu>

  • el-menu 태그 에 router 속성 을 추가 하면 현재 el-menu-item 태그 가 index 속성 을 통 해 해당 경로 페이지 로 이동 할 수 있 습 니 다.
  • 추가:default-active="$route.path"는 해당 메뉴 를 클릭 하여 해당 메뉴 를 선택 상태 로 만 들 수 있 습 니 다

  • 이렇게 메뉴 기능 을 실 현 했 지만 같은 메뉴 를 클릭 할 때 오류 가 발생 할 수 있 습 니 다.
    element-ui.common.js?5c96:3354 Error: Avoided redundant navigation to current location: "/dashboard".
        at createRouterError (vue-router.esm.js?8c4f:2062)
        at createNavigationDuplicatedError (vue-router.esm.js?8c4f:2035)
        at HTML5History.confirmTransition (vue-router.esm.js?8c4f:2195)
        at HTML5History.transitionTo (vue-router.esm.js?8c4f:2125)
        at HTML5History.push (vue-router.esm.js?8c4f:2492)
        at VueRouter.push (vue-router.esm.js?8c4f:2916)
        at VueComponent.routeToItem (element-ui.common.js?5c96:3381)
        at VueComponent.handleItemClick (element-ui.common.js?5c96:3348)
        at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
        at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    
    

    이 문 제 를 해결 하 는 방법
    ts 버 전
    //     index.ts     
    //       new VueRouter()  
    const resolveOriginal = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location:any) {
      return (resolveOriginal.call(this, location) as any).catch((err:any) => err)
    }
    

    js 버 전
    //     index.js     
    //       new VueRouter()  
    const resolveOriginal = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location:any) {
      return resolveOriginal.call(this, location).catch(err => err)
    }
    

    좋은 웹페이지 즐겨찾기