From 0dc23882289f8c5e0d7354a0262eda2ee3041873 Mon Sep 17 00:00:00 2001
From: Square Coin <linyuanqianpp@126.com>
Date: Tue, 1 Dec 2020 17:34:03 +0800
Subject: [PATCH] fix: fix the router behavior (#745)

* feat(menu): recover router logic

* fix(breadcrumb): correctly access $router

Co-authored-by: liik <linyunqianpp@126.com>
---
 packages/breadcrumb/src/item.vue | 21 ++++++++++++---
 packages/menu/src/menu.vue       | 46 +++++++++++++++-----------------
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/packages/breadcrumb/src/item.vue b/packages/breadcrumb/src/item.vue
index a37a8c80b7..a727a9e63e 100644
--- a/packages/breadcrumb/src/item.vue
+++ b/packages/breadcrumb/src/item.vue
@@ -7,13 +7,25 @@
     >
       <slot></slot>
     </span>
-    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
-    <span v-else class="el-breadcrumb__separator" role="presentation">{{ separator }}</span>
+    <i
+      v-if="separatorClass"
+      class="el-breadcrumb__separator"
+      :class="separatorClass"
+    ></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{
+      separator
+    }}</span>
   </span>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, ref, onMounted } from 'vue'
+import {
+  defineComponent,
+  inject,
+  ref,
+  onMounted,
+  getCurrentInstance,
+} from 'vue'
 
 interface IBreadcrumbInject {
   separator: string
@@ -40,11 +52,12 @@ export default defineComponent({
   setup(props: IBreadcrumbItemProps, ctx) {
     const link = ref(null)
     const parent: IBreadcrumbInject = inject('breadcrumb')
+    const instance = getCurrentInstance()
+    const router = instance.appContext.config.globalProperties.$router
 
     onMounted(() => {
       link.value.setAttribute('role', 'link')
       link.value.addEventListener('click', () => {
-        const router = (ctx as any).$router
         if (!props.to || !router) return
         props.replace ? router.replace(props.to) : router.push(props.to)
       })
diff --git a/packages/menu/src/menu.vue b/packages/menu/src/menu.vue
index 8831f8e46f..81a14e3c65 100644
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@@ -95,6 +95,7 @@ export default defineComponent({
     const submenus = ref({})
     const alteredCollapse = ref(false)
     const rootMenuEmitter = mitt()
+    const router = instance.appContext.config.globalProperties.$router
 
     const hoverBackground = useMenuColor(props.backgroundColor)
 
@@ -187,7 +188,7 @@ export default defineComponent({
     }) => {
       const { index, indexPath } = item
       const hasIndex = item.index !== null
-      // const oldActiveIndex = activeIndex.value
+      const oldActiveIndex = activeIndex.value
 
       if (hasIndex) {
         activeIndex.value = item.index
@@ -198,31 +199,28 @@ export default defineComponent({
       if (props.mode === 'horizontal' || props.collapse) {
         openedMenus.value = []
       }
-      // TODO: support vue-router
-      // const currentRouter = instance.appContext.config.globalProperties.$router
-      // if (currentRouter && hasIndex) {
-      //   routeToItem(item, error => {
-      //     activeIndex.value = oldActiveIndex
-      //     if (error) {
-      //       // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
-      //       // https://github.com/ElemeFE/element/issues/17044
-      //       if (error.name === 'NavigationDuplicated') return
-      //       console.error(error)
-      //     }
-      //   })
-      // }
+
+      if (props.router && router && hasIndex) {
+        routeToItem(item, error => {
+          activeIndex.value = oldActiveIndex
+          if (error) {
+            // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
+            // https://github.com/ElemeFE/element/issues/17044
+            if (error.name === 'NavigationDuplicated') return
+            console.error(error)
+          }
+        })
+      }
     }
 
-    // const routeToItem = (item, onError) => {
-    //   let route = item.route || item.index
-    //   try {
-    //     const currentRouter =
-    //       instance.appContext.config.globalProperties.$router
-    //     currentRouter?.push(route, () => null, onError)
-    //   } catch (e) {
-    //     console.error(e)
-    //   }
-    // }
+    const routeToItem = (item, onError) => {
+      let route = item.route || item.index
+      try {
+        router?.push(route, () => null, onError)
+      } catch (e) {
+        console.error(e)
+      }
+    }
 
     const updateActiveIndex = (val?: string) => {
       const itemsInData = items.value