Bläddra i källkod

添加前端路由和aside菜单的注释

任一存 3 år sedan
förälder
incheckning
b2c8112ab6

+ 3 - 3
new_backstage/src/configue/menu.js

@@ -1,6 +1,6 @@
 /**
  * name => 路由项的meta.name
- * id => 路由项的meta.belong
+ * id => 路由项的meta.belong,对应主菜单的id
  * key => 路由项的name, 路由项的path中的第一层路径,路由项的meta.index,被渲染的组件在src/pages/systemOrType中的子路径名
  * noEdit => 有无对应的编辑页面
  * type => 路由项的meta.type, main中的key,分为system和content两类。
@@ -175,7 +175,7 @@ let routes = [
 ];
 
 /**
- * key与routes中的type相对应。也决定了被渲染的组件在pages下所在子路径。
+ * 一级菜单。key与routes中的type相对应。也决定了被渲染的组件在pages下所在子路径。
  */
 let main = [
   {
@@ -193,7 +193,7 @@ let main = [
 ];
 
 /**
- * main分为内容管理和系统管理两类,每一类会被加上routes字段,包含routes中类别相同的条目。
+ * main分为内容管理和系统管理两类,每一类会被加上routes字段,包含routes中类别相同的条目。此变量用于配置前端路由。
  */
 let menu = main.map(item=>{
   let route = []

+ 3 - 0
new_backstage/src/mixins/index.js

@@ -169,6 +169,7 @@ Vue.mixin({
         })
         .catch(() => {});
     },
+    // 刷新列表页
     backList() {
       let name = this.$route.meta.index;
       let { type } = this.$route.params;
@@ -179,6 +180,7 @@ Vue.mixin({
         },
       });
     },
+    // 前往相应的编辑页
     goto(item) {
       let { type } = this.$route.params;
       this.$router.push({
@@ -210,6 +212,7 @@ Vue.mixin({
         );
       });
     },
+    // 前往相应编辑,,audit模式。
     audit(item) {
       let { type } = this.$route.params;
       this.$router.push({

+ 20 - 12
new_backstage/src/pages/layout/aside.vue

@@ -17,10 +17,10 @@ export default {
   components: {},
   data () {
     return {
-      routes,
-      main,
-      menu:[],
-      tmpRoute:[]
+      routes, // 可否不挂到组件上?
+      main, // 可否不挂到组件上?
+      menu:[], // 适用于此用户的菜单
+      tmpRoute:[] //适用于此用户的所有子菜单项的集合。和menu有冗余。
     }
   },
   computed: {
@@ -31,6 +31,7 @@ export default {
       set: function () {
       }
     },
+    // 当前url所属的主菜单
     belong: {
       get: function () {
         return this.$route.meta.belong
@@ -40,6 +41,7 @@ export default {
     }
   },
   watch: {
+    // 前端路由变化后,把active的子菜单项保存到store。
     'activeIdx':{
       immediate:true,
       handler: function (newVal) {
@@ -57,12 +59,15 @@ export default {
       let path = {path:`/${item.key}${item.param?`/${item.param.map(tt=>tt.default).join('/')}`:''}`}
       this.$router.push(path)
     },
+    // mounted时执行。根据后端给的菜单和配置文件里的菜单和用户身份,得到最终菜单保存到本组件,并保存active菜单项到store。
     async getResource(){
+      // 从后端拿到该用户有权限的菜单列表。
       let result = await this.$http({
         method: 'GET',
         url: '/sys/resource/getTreePermissions'
       })
-
+      // menu.js里配置的routes列表里的每一项,如果在后端给的列表里也有对应项,则二者合并保存到此变量。
+      // 或者那一项是系统管理类型的,且用户是管理员,也保存到此变量。
       this.tmpRoute = routes.filter(item => {
         let tmp = ''
         result.data.forEach(sub=>{
@@ -73,24 +78,27 @@ export default {
           }
         })
 
-          if (item.type == "system") {
-            if (window.localStorage.getItem("role") == 'sys_admin') {
-                tmp = item
-            }
-            else{
-              tmp = ''
-            }
+        if (item.type == "system") {
+          if (window.localStorage.getItem("role") == 'sys_admin') {
+              tmp = item
           }
+          else{
+            tmp = ''
+          }
+        }
+
         return tmp ? Object.assign(item,tmp) : tmp
       });
 
       console.log(this.tmpRoute);
 
+      // 找出active的那一项并保存到store
       let temp = this.tmpRoute.filter(item=>{
           return item.key == this.activeIdx
         })
       this.$store.commit("SetActiveMenu", temp[0]);
 
+      // menu.js里main加上子菜单数据,去掉没有子菜单的主菜单项,保存到本组件。
       this.menu = main.filter(item=>{
         let route = []
         this.tmpRoute.forEach((sub)=>{

+ 4 - 0
new_backstage/src/router/base.js

@@ -1,3 +1,7 @@
+/**
+ * 没用到
+ */
+
 const Menu = [
   { text: '首页', belong: 1, link: '/', name: 'home' },
   { text: '三维场景', belong: 2, link: '/digital', name: 'digital' },