fix: vue-router 升级兼容处理 (#2910)

leafage-collb · web-flow · commit e6cb7a87e343 · 2026-06-11T15:38:59.000+08:00
diff --git a/webfe/package_vue/src/components/app-migration-dialog/index.vue b/webfe/package_vue/src/components/app-migration-dialog/index.vue
@@ -345,13 +345,15 @@ export default {
           // 列表页直接刷新
           window.location.reload();
         } else {
-          await this.$router.push({
+          const failure = await this.$router.push({
             name: 'cloudAppSummary',
             params: {
               id: this.data.code,
             },
           });
-          window.location.reload();
+          if (!failure || failure.name === 'NavigationDuplicated') {
+            window.location.reload();
+          }
         }
       }
     },
diff --git a/webfe/package_vue/src/components/global-search/search-result.vue b/webfe/package_vue/src/components/global-search/search-result.vue
@@ -302,7 +302,7 @@ export default {
     // 详情
     toAppBaseInfo(appItem) {
       this.$router.push({
-        name: 'appBaseInfo',
+        name: 'appBasicInfo',
         params: {
           id: appItem.code,
         },
diff --git a/webfe/package_vue/src/components/paas-app-nav.vue b/webfe/package_vue/src/components/paas-app-nav.vue
@@ -530,7 +530,7 @@ export default {
           });
         } else {
           this.$router.push({
-            name: 'appBaseInfo',
+            name: 'appBasicInfo',
             params: {
               id: this.curAppInfo.application.code,
             },
diff --git a/webfe/package_vue/src/components/plugin-quick-nav.vue b/webfe/package_vue/src/components/plugin-quick-nav.vue
@@ -165,18 +165,19 @@ export default {
     },
     async changePlugin(data) {
       // 如果去往当前的路由没有权限则去往概览页
-      const parmas = this.getTarget(data.id, data.pd_id);
+      const params = this.getTarget(data.id, data.pd_id);
       this.hideSelectData();
-      this.$router.push(parmas);
       // 如果当前为插件版本、测试阶段/测试报告，返回概览页
       if (['pluginVersionRelease', 'pluginTestReport'].includes(this.$route.name)) {
-        this.$router.replace({
+        this.$router.push({
           name: 'pluginSummary',
-          query: {
+          params: {
             id: data.id,
             pluginTypeId: data.pd_id,
           },
         });
+      } else {
+        this.$router.push(params);
       }
     },
     searchPlugin: debounce(function () {
diff --git a/webfe/package_vue/src/router/index.js b/webfe/package_vue/src/router/index.js
@@ -20,6 +20,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import { pluginRouter } from './plugin';
 import { platformRouters } from './platform';
+import { installNavigationCompat } from './navigation-compat';
 import store from '@/store';
 
 const frontPage = () => import(/* webpackChunkName: 'front-page' */'@/views/index').then(module => module).catch((error) => {
@@ -376,6 +377,8 @@ const permission403 = () => import(/* webpackChunkName: 'permission403' */'@/vie
 
 Vue.use(Router);
 
+installNavigationCompat(Router);
+
 const router = new Router({
   mode: 'history',
   // web url path
@@ -744,6 +747,13 @@ const router = new Router({
             },
             {
               path: 'module-info',
+              redirect: to => ({
+                name: 'moduleInfo',
+                params: to.params,
+                query: to.query,
+              }),
+            },
+            {
               path: 'info',
               component: moduleInfo,
               name: 'moduleInfo',
@@ -827,9 +837,11 @@ const router = new Router({
           path: ':id/deployments',
           component: cloudAppDeployManage,
           name: 'cloudAppDeployManage',
-          redirect: {
-            name: 'cloudAppDeployForProcess',
-          },
+          redirect: to => ({
+            name: 'cloudAppDeployManageStag',
+            params: to.params,
+            query: to.query,
+          }),
           children: [
             {
               path: 'stag',
@@ -1123,7 +1135,7 @@ const router = new Router({
     },
     {
       path: '/developer-center/apps/:id/create/gitee/success',
-      name: 'createGithubAppSucc',
+      name: 'createGiteeAppSucc',
       component: createGitAppSucc,
     },
     {
@@ -1148,7 +1160,7 @@ router.beforeEach(async (to, from, next) => {
   sessionStorage.setItem('NOTICE', true);
   if (window.location.href.indexOf(window.GLOBAL_CONFIG.V3_OA_DOMAIN) !== -1) {
     const url = window.location.href.replace(window.GLOBAL_CONFIG.V3_OA_DOMAIN, window.GLOBAL_CONFIG.V3_WOA_DOMAIN);
-    window.location.replace(url);
+    return window.location.replace(url);
   } else {
     const checkUserFeature = async (featureKey) => {
       // 可能为页面刷新重新调用获取功能开关
@@ -1158,11 +1170,12 @@ router.beforeEach(async (to, from, next) => {
       store.state.userFeature[featureKey] ? next() : next({ name: '404' });
     };
     if (to.path.startsWith('/plugin-center')) {
-      checkUserFeature('ALLOW_PLUGIN_CENTER');
+      await checkUserFeature('ALLOW_PLUGIN_CENTER');
     } else if (to.path.startsWith('/plat-mgt')) {
-      checkUserFeature('PLATFORM_MANAGEMENT');
+      await checkUserFeature('PLATFORM_MANAGEMENT');
+    } else {
+      next();
     }
-    next();
   }
 });
 
diff --git a/webfe/package_vue/src/router/navigation-compat.js b/webfe/package_vue/src/router/navigation-compat.js
@@ -0,0 +1,65 @@
+/**
+ * 判断导航失败是否为可忽略的类型（重复导航或重定向导航）。
+ *   1. 通过 error.name 直接判断
+ *   2. 通过 Router.isNavigationFailure 静态方法判断
+ *
+ * @param {Object} Router - vue-router 构造函数
+ * @param {Error|null} error - 导航过程中抛出的错误对象
+ * @returns {boolean} 是否是可忽略的导航失败
+ */
+const isIgnoredNavigationFailure = (Router, error) => (
+  error
+  && (
+    error.name === 'NavigationDuplicated'
+    || error.name === 'NavigationRedirected'
+    || (Router.isNavigationFailure
+      && Router.NavigationFailureType
+      && Router.isNavigationFailure(error, Router.NavigationFailureType.duplicated))
+    || (Router.isNavigationFailure
+      && Router.NavigationFailureType
+      && Router.isNavigationFailure(error, Router.NavigationFailureType.redirected))
+  )
+);
+
+/**
+ * 包装路由导航方法（push/replace），
+ * 使其在传入回调时保持原有调用方式，
+ * 在返回 Promise 时静默吞掉可忽略的导航失败异常。
+ *
+ * @param {Object} Router - vue-router 构造函数
+ * @param {Function} fn - 原始导航方法（push 或 replace）
+ * @returns {Function} 包装后的导航方法
+ */
+const wrapNavigationMethod = (Router, fn) => function navigation(location, onResolve, onReject) {
+  // 传统回调风格：用户传入了 onResolve/onReject，直接透传原始方法
+  if (onResolve || onReject) {
+    return fn.call(this, location, onResolve, onReject);
+  }
+  // Promise 风格：捕获可忽略的失败，避免未捕获的 Promise 异常
+  const navigationResult = fn.call(this, location);
+  if (!navigationResult || typeof navigationResult.catch !== 'function') {
+    return navigationResult;
+  }
+  return navigationResult.catch((error) => {
+    if (isIgnoredNavigationFailure(Router, error)) {
+      return error;
+    }
+    return Promise.reject(error);
+  });
+};
+
+/**
+ * 安装导航兼容补丁，覆盖 Router.prototype 上的 push 和 replace 方法，
+ *
+ * @param {Object} Router - vue-router 构造函数
+ */
+export function installNavigationCompat(Router) {
+  const { prototype } = Router;
+  // 避免重复安装
+  if (prototype.navigationCompatInstalled) {
+    return;
+  }
+  prototype.push = wrapNavigationMethod(Router, prototype.push);
+  prototype.replace = wrapNavigationMethod(Router, prototype.replace);
+  prototype.navigationCompatInstalled = true;
+}
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/deployment/comps/deploy-action/index.vue b/webfe/package_vue/src/views/dev-center/app/engine/deployment/comps/deploy-action/index.vue
@@ -2366,7 +2366,7 @@ export default {
         // 未设置插件分类
         case 'FILL_PLUGIN_TAG_INFO':
           this.$router.push({
-            name: 'appBaseInfo',
+            name: 'appBasicInfo',
             params: {
               id: this.appCode,
               pluginTypeActive: true,
diff --git a/webfe/package_vue/src/views/dev-center/app/engine/processes/comps/process-operation.vue b/webfe/package_vue/src/views/dev-center/app/engine/processes/comps/process-operation.vue
@@ -819,6 +819,7 @@ export default {
     }
     return {
       btnLoadingGif: require('@static/images/btn_loading.gif'),
+      unregisterRouteGuard: null,
       processConfigDialog: {
         isLoading: false,
         visiable: false,
@@ -1111,14 +1112,18 @@ export default {
     moment.locale(this.localLanguage);
     this.init();
     // 切换路由前清空定时器
-    this.$router.beforeEach((to, from, next) => {
+    this.unregisterRouteGuard = this.$router.beforeEach((to, from, next) => {
       this.closeServerPush();
       next();
     });
     this.isDateChange = false;
     this.getAutoScalFlag();
   },
   beforeDestroy() {
+    if (this.unregisterRouteGuard) {
+      this.unregisterRouteGuard();
+      this.unregisterRouteGuard = null;
+    }
     this.closeServerPush();
     this.closeLogDetail();
   },
diff --git a/webfe/package_vue/src/views/dev-center/app/index.vue b/webfe/package_vue/src/views/dev-center/app/index.vue
@@ -12,7 +12,7 @@
           />
           <!-- 普通应用 -->
           <paas-app-nav
-            v-else
+            v-else-if="type"
             :is-migration-entry-shown="isMigrationEntryShown"
             @show-migration-dialog="showMigrationDialog"
           />
@@ -59,7 +59,7 @@
                   {{ $t('您没有访问当前应用该功能的权限，如需申请，请联系') }}
                   <router-link
                     class="toRolePage"
-                    :to="{ name: 'appRoles', params: { id: appCode } }"
+                    :to="{ name: 'appMembers', params: { id: appCode } }"
                   >
                     {{ $t('成员管理') }}
                   </router-link>
@@ -136,7 +136,7 @@ export default {
       // 非应用引擎 应用 时所要显示的子级导航
       subNavIds: [10, 12, 13, 14],
       engineEnabled: false,
-      type: 'default',
+      type: null,
       appMigrationDialogConfig: {
         visible: false,
         data: {},
@@ -196,9 +196,6 @@ export default {
         curAppInfo = store.state.appInfo[appCode];
         store.commit('updateCurAppByCode', { appCode, moduleId });
       }
-      next((vm) => {
-        vm.type = curAppInfo.application.type;
-      });
       // 如果不带moduleId, 以默认模块作一次重定向
       if (!moduleId) {
         to.params.moduleId = curAppInfo.application.modules.find((module) => module.is_default).name;
@@ -208,7 +205,7 @@ export default {
           query: to.query,
         });
       } else {
-        next(true);
+        next((vm) => Object.assign(vm, { type: curAppInfo.application.type }));
       }
     } catch (e) {
       next({
diff --git a/webfe/package_vue/src/views/dev-center/search/comps/application.vue b/webfe/package_vue/src/views/dev-center/search/comps/application.vue
@@ -133,7 +133,7 @@ export default {
 
     toAppBaseInfo(appItem) {
       this.$router.push({
-        name: 'appBaseInfo',
+        name: 'appBasicInfo',
         params: {
           id: appItem.code,
         },
