fix:修复动态注册路由i18n报错的问题

base-manager-ui/admin/src/main.js

 import Vue from "vue";
 import App from "./App.vue";
-import { initRouter } from "./router";
 import "./theme/index.less";
 import Antd from "ant-design-vue";
 import store from "./store";
@@ -9,7 +8,8 @@ import "./assets/css/common.less";
 import "./assets/css/relas.less";
 import "./assets/css/use.less";
 import Plugins from "@/plugins";
-import { initI18n } from "@/utils/i18n";
+import { router } from "@/router";
+import { i18n } from "@/utils/i18n";
 import bootstrap from "@/bootstrap";
 import "moment/locale/zh-cn";
 import VueResource from "vue-resource";
@@ -56,8 +56,6 @@ Vue.prototype.$nanoid = nanoid;
 import * as echarts from "echarts";
 Vue.prototype.$echarts = echarts;
 
-export const router = initRouter(store.state.setting.asyncRoutes);
-const i18n = initI18n("CN", "US");
 Vue.use(Antd);
 Vue.config.productionTip = false;
 // Vue.use(Viser)

base-manager-ui/admin/src/pages/basicset/jump/jump.vue

@@ -7,6 +7,7 @@
 <script>
 import local from "@/utils/local";
 import { mapMutations } from "vuex";
+import { createMenus } from "@/router";
 export default {
   data() {
     return {};
@@ -26,8 +27,15 @@ export default {
     ]),
     // 获取token
     getToken() {
-      let { token, userInfo, siteid, siteName, sysName, sysLogo, path } =
-        this.$route.query;
+      let {
+        token,
+        userInfo,
+        siteid,
+        siteName,
+        sysName,
+        sysLogo,
+        path,
+      } = this.$route.query;
       if (token && userInfo) {
         userInfo = JSON.parse(userInfo);
         this.SET_userInfo(userInfo);
@@ -39,6 +47,8 @@ export default {
         this.SET_path(path);
         local.setLocal("siteId", siteid);
         local.setLocal("siteName", siteName);
+        // 动态菜单
+        createMenus();
         this.$router.push("/website");
       } else {
         this.$message.warning("跳转失败,请重新登录");

base-manager-ui/admin/src/router/config.js

@@ -6,26 +6,6 @@ import Layouts from "@/layouts/Layouts";
 // 路由配置
 const options = {
   routes: [
-    {
-      path: "/jump",
-      name: "跳转页面",
-      component: () => import("@/pages/basicset/jump/jump"),
-    },
-    {
-      path: "*",
-      name: "404",
-      component: () => import("@/pages/exception/404"),
-    },
-    {
-      path: "/403",
-      name: "403",
-      component: () => import("@/pages/exception/403"),
-    },
-    {
-      path: "/apppreview",
-      name: "预览页面",
-      component: () => import("@/pages/basicset/appmarket/AppPreview"),
-    },
     {
       path: "/",
       name: "首页",
@@ -33,7 +13,7 @@ const options = {
       redirect: "/website",
       children: [
         {
-          path: "website",
+          path: "/website",
           name: "站点管理",
           meta: {
             icon: "bank",
@@ -41,7 +21,7 @@ const options = {
           component: () => import("@/pages/basicset/site/website"),
         },
         {
-          path: "business",
+          path: "/business",
           meta: {
             icon: "book",
           },
@@ -118,7 +98,7 @@ const options = {
           ],
         },
         {
-          path: "department",
+          path: "/department",
           meta: {
             icon: "audit",
           },
@@ -141,7 +121,7 @@ const options = {
           ],
         },
         {
-          path: "personnel",
+          path: "/personnel",
           name: "工作人员管理",
           meta: {
             icon: "idcard",
@@ -149,7 +129,7 @@ const options = {
           component: () => import("@/pages/basicset/workman/personnel"),
         },
         {
-          path: "festival",
+          path: "/festival",
           name: "节假日管理",
           meta: {
             icon: "carry-out",
@@ -157,7 +137,7 @@ const options = {
           component: () => import("@/pages/basicset/holiday/festival"),
         },
         {
-          path: "deploy",
+          path: "/deploy",
           name: "部署模块管理",
           meta: {
             icon: "appstore",
@@ -167,7 +147,7 @@ const options = {
         },
 
         {
-          path: "hall",
+          path: "/hall",
           name: "大厅管理",
           meta: {
             icon: "gateway",
@@ -197,7 +177,7 @@ const options = {
         },
 
         {
-          path: "surface",
+          path: "/surface",
           component: () => import("@/pages/basicset/surface/index"),
           meta: {
             icon: "skin",
@@ -219,7 +199,7 @@ const options = {
           ],
         },
         {
-          path: "configurat",
+          path: "/configurat",
           name: "短信配置",
           meta: {
             icon: "mail",
@@ -228,7 +208,7 @@ const options = {
         },
 
         {
-          path: "appmarket",
+          path: "/appmarket",
           component: () => import("@/pages/basicset/appmarket/Index"),
           meta: {
             icon: "shop",
@@ -315,7 +295,7 @@ const options = {
           ],
         },
         {
-          path: "system",
+          path: "/system",
           name: "系统设置",
           component: () => import("@/pages/basicset/system/System"),
           meta: {

base-manager-ui/admin/src/router/index.js

 import Vue from "vue";
-import Router from "vue-router";
+import VueRouter from "vue-router";
 import { formatRoutes } from "@/utils/routerUtil";
+import { i18n } from "@/utils/i18n";
 import store from "@/store";
-Vue.use(Router);
+import { mergeI18nFromRoutes } from "@/utils/i18n";
+Vue.use(VueRouter);
 //解决重复路由报错
-const originalPush = Router.prototype.push;
+const originalPush = VueRouter.prototype.push;
 // 修改原型对象中的push方法
-Router.prototype.push = function push(location) {
+VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch((err) => err);
 };
 
+const routes = [
+  {
+    path: "/jump",
+    name: "跳转页面",
+    component: () => import("@/pages/basicset/jump/jump"),
+  },
+  {
+    path: "*",
+    name: "404",
+    component: () => import("@/pages/exception/404"),
+  },
+  {
+    path: "/403",
+    name: "403",
+    component: () => import("@/pages/exception/403"),
+  },
+  {
+    path: "/apppreview",
+    name: "预览页面",
+    component: () => import("@/pages/basicset/appmarket/AppPreview"),
+  },
+];
+formatRoutes(routes);
+const router = new VueRouter({
+  routes,
+});
+
 // 不需要登录拦截的路由配置
 const loginIgnore = {
   names: ["404", "403"], //根据路由名称匹配
-  paths: ["/login"], //根据路由fullPath匹配
+  paths: ["/login", "/jump"], //根据路由fullPath匹配
   /**
    * 判断路由是否包含在该配置中
    * @param route vue-router 的 route 对象
@@ -26,18 +55,15 @@ const loginIgnore = {
 
 /**
  * 初始化路由实例
- * @param isAsync 是否异步路由模式
  * @returns {VueRouter}
  */
-function initRouter(isAsync) {
-  let role = store.getters["site/userInfo"].name;
-  if (!role) return;
-  const options = isAsync
+function initRouter() {
+  // 是否异步路由模式
+  const options = store.state.setting.asyncRoutes
     ? require("./async/config.async").default
     : require("./config").default;
   formatRoutes(options.routes);
-  options.routes = calcRouters(options.routes, role);
-  return new Router(options);
+  return options;
 }
 
 // 判断权限
@@ -66,4 +92,22 @@ function calcRouters(dynamicRouter, role) {
   });
   return res;
 }
-export { loginIgnore, initRouter };
+
+// 动态菜单
+function createMenus() {
+  let role = store.getters["site/userInfo"].name;
+  if (!role) return;
+  let options = initRouter();
+  let routesArr = calcRouters(options.routes, role);
+  const rootRoute = routesArr.find((item) => item.path === "/");
+  const menuRoutes = rootRoute && rootRoute.children;
+  mergeI18nFromRoutes(i18n, menuRoutes);
+  if (menuRoutes) {
+    routesArr.forEach((v) => {
+      router.addRoute(v);
+    });
+    store.commit("setting/setMenuData", menuRoutes);
+  }
+}
+createMenus();
+export { loginIgnore, initRouter, createMenus, router };

base-manager-ui/admin/src/store/modules/setting.js

@@ -28,7 +28,6 @@ export default {
     menuData(state, getters, rootState) {
       if (state.filterMenu) {
         const { permissions, roles } = rootState.account;
-        console.log(permissions, roles);
         return filterMenu(deepClone(state.menuData), permissions, roles);
       }
       return state.menuData;

base-manager-ui/admin/src/utils/i18n.js

-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-import routesI18n from '@/router/i18n'
-import './Objects'
-import { getI18nKey } from '@/utils/routerUtil'
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+import routesI18n from "@/router/i18n";
+import "./Objects";
+import { getI18nKey } from "@/utils/routerUtil";
 
 /**
  * 创建 i18n 配置
@@ -10,16 +10,18 @@ import { getI18nKey } from '@/utils/routerUtil'
  * @param fallback 回退语言
  * @returns {VueI18n}
  */
-function initI18n (locale, fallback) {
-  Vue.use(VueI18n)
+function initI18n(locale, fallback) {
+  Vue.use(VueI18n);
   let i18nOptions = {
     locale,
     fallbackLocale: fallback,
     silentFallbackWarn: true,
-  }
-  return new VueI18n(i18nOptions)
+  };
+  return new VueI18n(i18nOptions);
 }
 
+const i18n = initI18n("CN", "US");
+
 /**
  * 根据 router options 配置生成 国际化语言
  * @param lang
@@ -27,16 +29,22 @@ function initI18n (locale, fallback) {
  * @param valueKey
  * @returns {*}
  */
-function generateI18n (lang, routes, valueKey) {
-  routes.forEach(route => {
-    let keys = getI18nKey(route.fullPath).split('.')
-    let value = valueKey === 'path' ? route[valueKey].split('/').filter(item => !item.startsWith(':') && item != '').join('.') : route[valueKey]
-    lang.assignProps(keys, value)
+function generateI18n(lang, routes, valueKey) {
+  routes.forEach((route) => {
+    let keys = getI18nKey(route.fullPath).split(".");
+    let value =
+      valueKey === "path"
+        ? route[valueKey]
+            .split("/")
+            .filter((item) => !item.startsWith(":") && item != "")
+            .join(".")
+        : route[valueKey];
+    lang.assignProps(keys, value);
     if (route.children) {
-      generateI18n(lang, route.children, valueKey)
+      generateI18n(lang, route.children, valueKey);
     }
-  })
-  return lang
+  });
+  return lang;
 }
 
 /**
@@ -44,14 +52,18 @@ function generateI18n (lang, routes, valueKey) {
  * @param routes
  * @param parentPath
  */
-function formatFullPath (routes, parentPath = '') {
-  routes.forEach(route => {
-    let isFullPath = route.path.substring(0, 1) === '/'
-    route.fullPath = isFullPath ? route.path : (parentPath === '/' ? parentPath + route.path : parentPath + '/' + route.path)
+function formatFullPath(routes, parentPath = "") {
+  routes.forEach((route) => {
+    let isFullPath = route.path.substring(0, 1) === "/";
+    route.fullPath = isFullPath
+      ? route.path
+      : parentPath === "/"
+      ? parentPath + route.path
+      : parentPath + "/" + route.path;
     if (route.children) {
-      formatFullPath(route.children, route.fullPath)
+      formatFullPath(route.children, route.fullPath);
     }
-  })
+  });
 }
 
 /**
@@ -59,20 +71,16 @@ function formatFullPath (routes, parentPath = '') {
  * @param i18n
  * @param routes
  */
-function mergeI18nFromRoutes (i18n, routes) {
-  formatFullPath(routes)
-  const CN = generateI18n(new Object(), routes, 'name')
-  const US = generateI18n(new Object(), routes, 'path')
-  i18n.mergeLocaleMessage('CN', CN)
-  i18n.mergeLocaleMessage('US', US)
-  const messages = routesI18n.messages
-  Object.keys(messages).forEach(lang => {
-    i18n.mergeLocaleMessage(lang, messages[lang])
-  })
+function mergeI18nFromRoutes(i18n, routes) {
+  formatFullPath(routes);
+  const CN = generateI18n(new Object(), routes, "name");
+  const US = generateI18n(new Object(), routes, "path");
+  i18n.mergeLocaleMessage("CN", CN);
+  i18n.mergeLocaleMessage("US", US);
+  const messages = routesI18n.messages;
+  Object.keys(messages).forEach((lang) => {
+    i18n.mergeLocaleMessage(lang, messages[lang]);
+  });
 }
 
-export {
-  initI18n,
-  mergeI18nFromRoutes,
-  formatFullPath
-}
+export { initI18n, mergeI18nFromRoutes, formatFullPath, i18n };

base-manager-ui/admin/src/utils/routerUtil.js

@@ -136,11 +136,11 @@ function loadRoutes(routesConfig) {
   // 提取路由国际化数据
   mergeI18nFromRoutes(i18n, router.options.routes);
   // 初始化Admin后台菜单数据
-  const rootRoute = router.options.routes.find((item) => item.path === "/");
-  const menuRoutes = rootRoute && rootRoute.children;
-  if (menuRoutes) {
-    store.commit("setting/setMenuData", menuRoutes);
-  }
+  // const rootRoute = router.options.routes.find((item) => item.path === "/");
+  // const menuRoutes = rootRoute && rootRoute.children;
+  // if (menuRoutes) {
+  //   store.commit("setting/setMenuData", menuRoutes);
+  // }
 }
 
 /**