动态增加路由的演示

Former-commit-id: 09afa0275b79bac197f18abe19f5136f74a56a15 [formerly 09afa0275b79bac197f18abe19f5136f74a56a15 [formerly 09afa0275b79bac197f18abe19f5136f74a56a15 [formerly 09afa0275b79bac197f18abe19f5136f74a56a15 [formerly 56ed017756f203a99f6f8214886d8c42bf6e7c45 [formerly 1ee3dca2bd17cf0cdd50d0ae1b2d72b643c5c13b]]]]]
Former-commit-id: 162b2efa6c1f40d2f82a60e6d46ca83f341b6e47
Former-commit-id: 63edc60bdf591ee34689102938c850596762ddf3
Former-commit-id: 524ace56fa7e3c219b0e317f57eacdb8819d5d8e [formerly 68e8b0adba042d31c389a5c477763af9f4c94d1a]
Former-commit-id: 20da1e8d1891bd4089b230f935260e88071c90e6
Former-commit-id: c978394b78ed728429205110b1b89be2651a42ab
Former-commit-id: 3ef346993eae5c049a866793ac015b19148d3e57
Former-commit-id: 1537e533b448fee2f0d94160e344b3515c0f4c3a
Former-commit-id: cdb3d246e64e1fd684beaf50981bfde7138de903

src/menu/modules/demo-playground.js

@@ -97,6 +97,14 @@ export default {
         { path: `${pre}log/console`, title: '控制台日志', icon: 'lightbulb-o' }
       ]
     },
+    {
+      path: `${pre}add-routes`,
+      title: '动态添加路由',
+      icon: 'plus-square',
+      children: [
+        { path: `${pre}add-routes/routes`, title: '添加页面', icon: 'file-o' }
+      ]
+    },
     { path: `${pre}env`, title: '环境信息', icon: 'exclamation-circle' }
   ])('/demo/playground/')
 }

src/router/modules/playground.js

@@ -37,6 +37,7 @@ export default {
     { path: 'log/console', name: `${pre}log-console`, component: _import('demo/playground/log/console'), meta: { ...meta, title: '控制台日志' } },
     { path: 'log/error', name: `${pre}log-error`, component: _import('demo/playground/log/error'), meta: { ...meta, title: '错误捕捉' } },
     { path: 'log/log', name: `${pre}log-log`, component: _import('demo/playground/log/log'), meta: { ...meta, title: '日志记录' } },
+    { path: 'add-routes/routes', name: `${pre}add-routes-routes`, component: _import('demo/playground/add-routes/routes'), meta: { ...meta, title: '添加页面' } },
     { path: 'env', name: `${pre}env`, component: _import('demo/playground/env'), meta: { ...meta, title: '环境信息' } }
   ])('demo-playground-')
 }

src/views/demo/playground/add-routes/alternates/1.vue

@@ -0,0 +1,5 @@
+<template>
+  <d2-container type="card">
+    <p>src/views/demo/playground/add-routes/alternates/1.vue</p>
+  </d2-container>
+</template>

src/views/demo/playground/add-routes/alternates/2.vue

@@ -0,0 +1,5 @@
+<template>
+  <d2-container type="card">
+    <p>src/views/demo/playground/add-routes/alternates/2.vue</p>
+  </d2-container>
+</template>

src/views/demo/playground/add-routes/alternates/3.vue

@@ -0,0 +1,5 @@
+<template>
+  <d2-container type="card">
+    <p>src/views/demo/playground/add-routes/alternates/3.vue</p>
+  </d2-container>
+</template>

src/views/demo/playground/add-routes/routes.vue

@@ -0,0 +1,110 @@
+<template>
+  <d2-container>
+    <el-alert
+      title="由于演示功能特殊，请注意在需要时刷新您的浏览器（以重置路由设置）查看效果"
+      type="warning"
+      show-icon/>
+    <d2-highlight :code="dataView"/>
+    <el-form label-position="top">
+      <el-form-item label="创建路由（你可以假设上面是接口数据）">
+        <el-button-group>
+          <el-button
+            v-for="item in setting"
+            :key="item.component"
+            @click="onClick(item)">
+            {{item.title}}
+          </el-button>
+        </el-button-group>
+      </el-form-item>
+    </el-form>
+  </d2-container>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+import { mapState, mapMutations } from 'vuex'
+import router from '@/router'
+import { frameInRoutes } from '@/router/routes'
+import layoutHeaderAside from '@/layout/header-aside'
+export default {
+  data () {
+    return {
+      title: '',
+      setting: [
+        { title: '追加页面 1', name: 'add-routes-1', path: 'add-routes/1', component: '1' },
+        { title: '追加页面 2', name: 'add-routes-2', path: 'add-routes/2', component: '2' },
+        { title: '追加页面 3', name: 'add-routes-3', path: 'add-routes/3', component: '3' }
+      ]
+    }
+  },
+  computed: {
+    ...mapState('d2admin/menu', [
+      'header'
+    ]),
+    dataView () {
+      return JSON.stringify(this.setting, null, 2)
+    }
+  },
+  methods: {
+    ...mapMutations({
+      pageInit: 'd2admin/page/init',
+      headerSet: 'd2admin/menu/headerSet'
+    }),
+    onClick ({ title, name, path, component }) {
+      // vue router 的设计暂时不能支持在路由示例上访问动态添加的路由
+      // 目前可行的解决方法是自行维护一个存储路由数据的位置
+      // https://github.com/vuejs/vue-router/issues/1234
+      // https://github.com/vuejs/vue-router/issues/1859
+      // https://github.com/vuejs/vue-router/issues/1955
+      // https://github.com/vuejs/vue-router/issues/2454
+      // https://github.com/vuejs/vue-router/issues/2280
+      // 所以暂时先不做对路由已经存在的判断
+      const route = [
+        {
+          path: '/demo/playground',
+          component: layoutHeaderAside,
+          children: [
+            {
+              path,
+              name,
+              component: () => import(`@/views/demo/playground/add-routes/alternates/${component}.vue`),
+              meta: {
+                title
+              }
+            }
+          ]
+        }
+      ]
+      this.$router.addRoutes(route)
+      // 更新标签页池
+      this.pageInit([
+        ...frameInRoutes,
+        ...route
+      ])
+      // 演示更新菜单
+      let menuGroup = {
+        title: '临时菜单',
+        icon: 'plus-square',
+        children: []
+      }
+      const menu = {
+        path: `/demo/playground/${path}`,
+        title,
+        icon: 'file-o'
+      }
+      let header = cloneDeep(this.header)
+      const menuGroupIndex = header.findIndex(e => e.title === menuGroup.title)
+      // 如果顶栏菜单已经有这个组，就在组里添加项目，反之新建一个菜单组
+      if (menuGroupIndex >= 0) {
+        header[menuGroupIndex].children.push(menu)
+      } else {
+        menuGroup.children.push(menu)
+        header.push(menuGroup)
+      }
+      this.headerSet(header)
+      // 跳转
+      this.$router.push({ name })
+    }
+  }
+}
+</script>