动态路由及路由权限

Author: kuangshp

menus.json

@@ -1,30 +1,30 @@
 {
 	"code":0,
-	"message":"Permintaan berhasil",
+	"message":"请求成功",
 	"result":[
 		{
 			"id":1,
 			"name":"Demo1",
 			"parentId":-1,
-			"path":"demo1"
+			"url":"demo1"
 		},
 		{
 			"id":2,
 			"name":"Demo11",
 			"parentId":1,
-			"path":"demo1.demo11"
+			"url":"demo1.demo11"
 		},
 		{
 			"id":3,
 			"name":"Demo12",
 			"parentId":1,
-			"path":"demo1.demo12"
+			"url":"demo1.demo12"
 		},
 		{
 			"id":4,
 			"name":"demo2",
 			"parentId":-1,
-			"path":"demo2"
+			"url":"demo2"
 		}
 	]
 }

src/components/app-breadcrumb/AppBreadcrumb.vue

@@ -1,14 +1,8 @@
-import AppBreadcrumb from './app-breadcrumb';
-import AppHeader from './app-header';
-import AppSidebar from './app-sidebar';
-import Framement from './framement';
+import Menus from './menus';
 import Demo from './demo';
 
 const components: { [propsName: string]: any } = {
-  AppBreadcrumb,
-  AppHeader,
-  AppSidebar,
-  Framement,
+  Menus,
   Demo,
 };
 

src/components/app-breadcrumb/index.ts

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-submenu
+      v-if="item.children.length"
+      :index="item.url"
+    >
+      <template slot="title">{{ item.name }}</template>
+      <!-- 递归使用该组件 -->
+      <template v-for="(m, i) in item.children">
+        <MenuItem
+          :item="m"
+          :key="i"
+        />
+      </template>
+    </el-submenu>
+    <el-menu-item
+      v-else
+      :index="item.url"
+    >
+      <router-link :to="{ name: item.url }">
+        <li>{{ item.name }}</li>
+      </router-link>
+
+    </el-menu-item>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({
+  name: 'MenuItem',
+})
+export default class MenuItem extends Vue {
+  @Prop() private item!: () => {};
+}
+</script>
+
+<style scoped lang="scss"></style>

src/components/app-header/index.ts

@@ -0,0 +1,69 @@
+<template>
+  <div class="app-sidebar">
+    <el-row class="tac">
+      <el-col :span="24">
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          v-if="menuList.length"
+          background-color="#333"
+          text-color="#fff"
+          active-text-color="#f90"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <template v-for="(item, index) in menuList">
+            <MenuItem
+              :key="index"
+              :item="item"
+            />
+          </template>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+import MenuItem from './MenuItem.vue';
+import { State, Action } from 'vuex-class';
+import { IViewState } from '@/store/view';
+
+@Component({
+  components: {
+    MenuItem,
+  },
+})
+export default class Menu extends Vue {
+  // 获取本地存储的菜单
+  @State private viewStore!: IViewState;
+
+  private isCollapse: boolean = false;
+
+  private handleOpen(key: any, keyPath: any) {
+    console.log(key, keyPath);
+  }
+  private handleClose(key: any, keyPath: any) {
+    console.log(key, keyPath);
+  }
+
+  // 计算属性
+  private get menuList() {
+    return this.viewStore.menuList;
+  }
+}
+</script>
+
+<style scoped lang="less">
+.sidebar {
+  position: relative;
+  .app-sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+</style>