路由配置 信息整合 样式小修改

src/layout/Second/Sidebar/Item.vue

@@ -49,6 +49,10 @@ export default {
 
     &:hover {
       background: transparent !important;
+      color: #387DF7 !important;
+      .el-submenu__icon-arrow {
+        color: #387DF7;
+      }
     }
 
     & > .svg-icon {

src/layout/Second/Sidebar/index.vue

@@ -19,9 +19,8 @@
 
 <script>
 
-import { join } from "path";
 import Item from "@/layout/Second/Sidebar/Item";
-import clone from "clone";
+import { initMenuItemList } from "@/utils/menu";
 
 export default {
   name: "Sidebar",
@@ -58,27 +57,7 @@ export default {
     }
   },
   methods: {
-    /**
-     * 对菜单列表进行初始化, 对路径进行处理, 非斜杠开头的路径将会与父路径进行拼接, 第一层的父路径为斜杠.
-     * @param menuItemList 原始菜单列表
-     * @param basePath 前缀路径
-     */
-    initMenuItemList(menuItemList, basePath = "/") {
-      return menuItemList.map(item => {
-        item = clone(item);
-        // 判断是否以basePath开头
-        if (!new RegExp(`^(${basePath}|/)`).test(item.path)) {
-          // 非法开头则对基于basePath进行拼接
-          item.path = join(basePath, item.path);
-        }
-        // 如果有子菜单递归进行处理
-        if (Array.isArray(item.children) && item.children.length > 0) {
-          item.children = this.initMenuItemList(item.children, item.path);
-        }
-        // 返回处理结果
-        return item;
-      });
-    }
+    initMenuItemList
   }
 };
 </script>

src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
-import { menuItemList, prefixBasePath } from "@/views/ProductIntroduction/menuInfo";
+import { menuItemList, prefixBasePath } from "@/utils/menu";
 
 Vue.use(VueRouter);
 
@@ -16,9 +16,13 @@ export default new VueRouter({
       component: _ => import("@/views/ProductIntroduction")
     },
     {
-      path: "/second/index",
+      path: "/second",
       component: _ => import("@/layout/Second"),
-      props: { route: true, menuItemList, basePath: prefixBasePath }
+      props: { route: true, menuItemList, basePath: prefixBasePath },
+      children: [{
+        path: 'index',
+        component: _ => import("@/views/index")
+      }]
     },
     {
       path: "/", // 程序启动默认路由

src/views/ProductIntroduction/menuInfo.js → src/utils/menu.js

+import clone from "clone";
+import { join } from "path";
+
+/**
+ * 对菜单列表进行初始化, 对路径进行处理, 非斜杠开头的路径将会与父路径进行拼接, 第一层的父路径为斜杠.
+ * @param menuItemList 原始菜单列表
+ * @param basePath 前缀路径
+ */
+export function initMenuItemList(menuItemList, basePath = "/") {
+  return menuItemList.map(item => {
+    item = clone(item);
+    // 判断是否以basePath开头
+    if (!new RegExp(`^(${basePath}|/)`).test(item.path)) {
+      // 非法开头则对基于basePath进行拼接
+      item.path = join(basePath, item.path);
+    }
+    // 如果有子菜单递归进行处理
+    if (Array.isArray(item.children) && item.children.length > 0) {
+      item.children = initMenuItemList(item.children, item.path);
+    }
+    // 返回处理结果
+    return item;
+  });
+}
+
 // 菜单列表
 export const menuItemList = [{
   path: "/second/index",
   meta: {
     icon: "icon_home",
-    title: "首页",
+    title: "首页"
   }
 }, {
   path: "it-facilities-management",
   meta: {
     icon: "icon_dashuju",
     title: "IT设施管理",
+    titleColor: "#387DF7",
+    englishTitle: "IT Facilities Management",
+    englishTitleColor: "#9BBDFB",
     url: "",
     content: "",
     image: "",
@@ -59,6 +87,9 @@ export const menuItemList = [{
   meta: {
     icon: "icon_jiaoxue",
     title: "教学与教务",
+    titleColor: "#E66A6E",
+    englishTitle: "Teaching and Academic Affairs",
+    englishTitleColor: "#F2B4B6",
     url: "",
     content: "",
     image: "",
@@ -145,6 +176,9 @@ export const menuItemList = [{
   meta: {
     icon: "icon_xuesheng",
     title: "学生工作",
+    titleColor: "#E89C69",
+    englishTitle: "Student Work",
+    englishTitleColor: "#F3CDB3",
     url: "",
     content: "",
     image: "",
@@ -295,4 +329,4 @@ export const menuItemList = [{
 }];
 
 // 前缀路径
-export const prefixBasePath = "/product-introduction"
+export const prefixBasePath = "/product-introduction";

src/views/ProductIntroduction/index.vue

@@ -8,7 +8,7 @@
 import Second from "@/layout/Second";
 import { empty } from "@/utils/validate";
 import Single from "@/views/ProductIntroduction/Single.vue";
-import { menuItemList, prefixBasePath } from "@/views/ProductIntroduction/menuInfo";
+import { menuItemList, prefixBasePath } from "@/utils/menu";
 
 
 export default {

src/views/index/index.vue

+<template>
+  <div class="index">
+    <h1>Index</h1>
+    <p>
+      This is the index page. You can find the source code for this page in
+      <code>src/views/index/index.vue</code>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index"
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file