完善菜单栏的状态，刷新页面后，也能自动打开对应菜单

src/components/layout/components/Sider.vue

@@ -5,6 +5,33 @@
       <span class="programTitle">{{ title }}</span>
     </div>
     <a-menu
+      class="ant-menu-ul"
+      :default-selected-keys="['1']"
+      :default-open-keys="['2']"
+      mode="inline"
+      theme="dark"
+      :defaultSelectedKeys="[activeMenu]"
+      :openKeys.sync="defaultOpenKeys"
+    >
+      <template v-for="item in routes">
+        <a-menu-item
+          v-if="!item.children"
+          :key="item.path"
+          @click="handleMenuRouterFun(item)"
+        >
+          <a-icon :type="item.meta.icon" />
+          <span>{{ item.meta.title }}</span>
+        </a-menu-item>
+        <SubMenu
+          v-else
+          :key="item.path"
+          :menu-info="item"
+          @handleBackFun="handleMenuRouterFun"
+        />
+      </template>
+    </a-menu>
+    <!-- <a-menu
+      ref="menuListRef"
       class="ant-menu-ul"
       theme="dark"
       mode="inline"
@@ -52,7 +79,7 @@
           </template>
         </a-sub-menu>
       </template>
-    </a-menu>
+    </a-menu> -->
   </div>
 </template>
 
@@ -60,19 +87,54 @@
 import { mapGetters } from 'vuex';
 import { PROGRAM_Title } from '@/common/Constant';
 import { optionalCopy } from '@/utils/tools';
+import { Menu } from 'ant-design-vue';
+const SubMenu = {
+  template: `
+      <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
+        <span slot="title">
+          <a-icon :type="menuInfo.meta.icon" /><span>{{ menuInfo.meta.title }}</span>
+        </span>
+        <template v-for="item in menuInfo.children">
+          <a-menu-item v-if="!item.children" :key="item.path" @click="handleMenuRouter(item)">
+            <a-icon :type="item.meta.icon" />
+            <span>{{ item.meta.title }}</span>
+          </a-menu-item>
+          <sub-menu v-else :key="item.path" :menu-info="item" @handleBackFun="handleMenuRouter"/>
+        </template>
+      </a-sub-menu>
+    `,
+  name: 'SubMenu',
+  // must add isSubMenu: true
+  isSubMenu: true,
+  props: {
+    ...Menu.SubMenu.props,
+    // Cannot overlap with properties within Menu.SubMenu.props
+    menuInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    handleMenuRouter(item) {
+      this.$emit('handleBackFun', item);
+    },
+  },
+};
 export default {
   props: {},
-  components: {},
+  components: {
+    SubMenu,
+  },
   data() {
     return {
       logoImg: require('@/assets/image/home/logo.png'),
       title: PROGRAM_Title,
-      defaultOpenKeys: '', // 默认展开的菜单
+      defaultOpenKeys: [], // 默认展开的菜单
     };
   },
   created() {},
   mounted() {
-    this.initDataFun(); //初始化数据
+    this.defaultOpenKeys = this.initDataFun(); //初始化数据
   },
   beforeDestroy() {},
   watch: {},
@@ -85,34 +147,34 @@ export default {
       if (meta.activeMenu) {
         return meta.activeMenu;
       }
-      console.log(meta, path);
+      // console.log(meta, path);
       return path;
     },
   },
   methods: {
     //初始化数据
     initDataFun() {
-      console.log(this.routes);
+      let defaultPath = [];
       let routeInfo = optionalCopy(this.$route, 'matched');
       for (let i = 0; i < this.routes.length; i++) {
         let item = this.routes[i];
         if (item.path === routeInfo.path) {
-          console.log('1111');
-          this.defaultOpenKeys = this.routes[i].path;
+          // console.log('1111');
           break;
         } else if (item.children) {
           for (let j = 0; j < item.children.length; j++) {
             let itemChild = item.children[j];
             if (itemChild.path === routeInfo.path) {
-              console.log('2222');
-              this.defaultOpenKeys = itemChild.path;
+              // console.log('2222');
+              defaultPath.push(item.path);
               break;
             } else if (itemChild.children) {
               for (let m = 0; m < itemChild.children.length; m++) {
                 let itemChildren = itemChild.children[m];
                 if (itemChildren.path === routeInfo.path) {
-                  console.log('333');
-                  this.defaultOpenKeys = itemChildren.path;
+                  // console.log('333');
+                  defaultPath.push(item.path);
+                  defaultPath.push(itemChild.path);
                   break;
                 }
               }
@@ -120,7 +182,7 @@ export default {
           }
         }
       }
-      console.log(this.defaultOpenKeys);
+      return defaultPath;
     },
     // 操作：点击了某个路由菜单
     handleMenuRouterFun(item) {

src/router/menu.js

@@ -65,6 +65,7 @@ export default [
   },
   {
     meta: { title: '文章管理', icon: 'user' },
+    path: '/articleManagement',
     children: [
       {
         path: '/articleManagement/list',

src/utils/waterMark.js

@@ -1,154 +0,0 @@
-/*eslint-disable*/
-export function setWaterMark(txt) {
-  var windowHeight = document.querySelector(".app-main").clientHeight;
-  var rows = Math.floor(windowHeight / 100) - 3;
-  var windowWidth = document.querySelector(".app-main").clientWidth;
-  var cols = Math.floor(windowWidth / 140);
-  watermark({
-    watermark_txt: txt,
-    watermark_rows: 70,
-    watermark_cols: 70
-  });
-}
-
-function watermark(settings) {
-  // 默认设置
-  var defaultSettings = {
-    watermark_txt: "text",
-    watermark_x: 230, // 水印起始位置x轴坐标
-    watermark_y: 20, // 水印起始位置Y轴坐标
-    watermark_rows: 5, // 水印行数
-    watermark_cols: 2, // 水印列数
-    watermark_x_space: 40, // 水印x轴间隔
-    watermark_y_space: 10, // 水印y轴间隔
-    watermark_color: "#ccc", // 水印字体颜色
-    watermark_alpha: 0.3, // 水印透明度
-    watermark_fontsize: "15px", // 水印字体大小
-    watermark_font: "微软雅黑", // 水印字体
-    watermark_width: 80, // 水印宽度
-    watermark_height: 80, // 水印长度
-    watermark_angle: 15 // 水印倾斜度数
-  };
-  // 采用配置项替换默认值，作用类似jquery.extend
-  if (arguments.length === 1 && typeof arguments[0] === "object") {
-    var src = arguments[0] || {};
-    for (let key in src) {
-      if (
-        src[key] &&
-        defaultSettings[key] &&
-        src[key] === defaultSettings[key]
-      ) {
-        continue;
-      } else if (src[key]) defaultSettings[key] = src[key];
-    }
-  }
-
-  var oTemp = document.createDocumentFragment();
-  // 获取页面最大宽度
-  var page_width = Math.max(
-    document.body.scrollWidth,
-    document.body.clientWidth
-  );
-  var cutWidth = page_width * 0.015;
-  var page_width = page_width - cutWidth;
-  // 获取页面最大高度
-  var page_height = Math.max(
-    document.querySelector(".app-main").scrollHeight,
-    document.querySelector(".app-main").clientHeight
-  );
-  // var page_height = document.body.scrollHeight+document.body.scrollTop;
-  // 如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
-  if (
-    defaultSettings.watermark_cols == 0 ||
-    parseInt(
-      defaultSettings.watermark_x +
-        defaultSettings.watermark_width * defaultSettings.watermark_cols +
-        defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)
-    ) > page_width
-  ) {
-    defaultSettings.watermark_cols = parseInt(
-      (page_width -
-        defaultSettings.watermark_x +
-        defaultSettings.watermark_x_space) /
-        (defaultSettings.watermark_width + defaultSettings.watermark_x_space)
-    );
-    defaultSettings.watermark_x_space = parseInt(
-      (page_width -
-        defaultSettings.watermark_x -
-        defaultSettings.watermark_width * defaultSettings.watermark_cols) /
-        (defaultSettings.watermark_cols - 1)
-    );
-  }
-  // 如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
-  if (
-    defaultSettings.watermark_rows == 0 ||
-    parseInt(
-      defaultSettings.watermark_y +
-        defaultSettings.watermark_height * defaultSettings.watermark_rows +
-        defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)
-    ) > page_height
-  ) {
-    defaultSettings.watermark_rows = parseInt(
-      (defaultSettings.watermark_y_space +
-        page_height -
-        defaultSettings.watermark_y) /
-        (defaultSettings.watermark_height + defaultSettings.watermark_y_space)
-    );
-    defaultSettings.watermark_y_space = parseInt(
-      (page_height -
-        defaultSettings.watermark_y -
-        defaultSettings.watermark_height * defaultSettings.watermark_rows) /
-        (defaultSettings.watermark_rows - 1)
-    );
-  }
-  var x;
-  var y;
-  for (var i = 0; i < defaultSettings.watermark_rows; i++) {
-    y =
-      defaultSettings.watermark_y +
-      (defaultSettings.watermark_y_space + defaultSettings.watermark_height) *
-        i;
-    for (var j = 0; j < defaultSettings.watermark_cols; j++) {
-      x =
-        defaultSettings.watermark_x +
-        (defaultSettings.watermark_width + defaultSettings.watermark_x_space) *
-          j;
-
-      var mask_div = document.createElement("div");
-      mask_div.id = "mask_div" + i + j;
-      mask_div.className = "mask_div";
-      mask_div.appendChild(
-        document.createTextNode(defaultSettings.watermark_txt)
-      );
-      // 设置水印div倾斜显示
-      mask_div.style.webkitTransform =
-        "rotate(-" + defaultSettings.watermark_angle + "deg)";
-      mask_div.style.MozTransform =
-        "rotate(-" + defaultSettings.watermark_angle + "deg)";
-      mask_div.style.msTransform =
-        "rotate(-" + defaultSettings.watermark_angle + "deg)";
-      mask_div.style.OTransform =
-        "rotate(-" + defaultSettings.watermark_angle + "deg)";
-      mask_div.style.transform =
-        "rotate(-" + defaultSettings.watermark_angle + "deg)";
-      mask_div.style.visibility = "";
-      mask_div.style.position = "absolute";
-      mask_div.style.left = x + "px";
-      mask_div.style.top = y + "px";
-      mask_div.style.overflow = "hidden";
-      mask_div.style.zIndex = "9999";
-      mask_div.style.pointerEvents = "none"; // pointer-events:none  让水印不遮挡页面的点击事件
-      // mask_div.style.border="solid #eee 1px";
-      mask_div.style.opacity = defaultSettings.watermark_alpha;
-      mask_div.style.fontSize = defaultSettings.watermark_fontsize;
-      mask_div.style.fontFamily = defaultSettings.watermark_font;
-      mask_div.style.color = defaultSettings.watermark_color;
-      mask_div.style.textAlign = "center";
-      mask_div.style.width = defaultSettings.watermark_width + "px";
-      mask_div.style.height = defaultSettings.watermark_height + "px";
-      mask_div.style.display = "block";
-      oTemp.appendChild(mask_div);
-    }
-  }
-  document.body.appendChild(oTemp);
-}

vue.config.js

@@ -0,0 +1,46 @@
+/*
+ * @Author: your name
+ * @Date: 2020-04-17 09:01:26
+ * @LastEditTime: 2021-01-29 12:14:46
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \bSpaceDesign\vue.config.js
+ */
+/**
+ *@desc    webpack配置文件
+ */
+// const path = require('path')
+// const resolve = dir => {
+//   return path.join(__dirname, dir)
+// }
+
+module.exports = {
+  runtimeCompiler: true,
+  // // 放置静态资源的地方 (js/css/img/font/...)
+  // assetsDir: 'static',
+
+  // // 是否为生产环境构建生成 source map？
+  // productionSourceMap: false,
+
+  // // 配置 webpack-dev-server 行为。
+  // devServer: {
+  //   open: true
+  // },
+  // publicPath: './',
+
+  // // 将构建好的文件输出到哪里
+  // outputDir: 'dist',
+  // chainWebpack: config => {
+  //   config.resolve.alias
+  //     .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
+  //   // .set('_c', resolve('src/components'))
+  //   // .set('_conf', resolve('src/config'))
+  // },
+
+  // pluginOptions: {
+  //   'style-resources-loader': {
+  //     preProcessor: 'less',
+  //     patterns: [path.resolve(__dirname, './src/assets/css/variable.less')]
+  //   }
+  // }
+}