feat import routes

mock/route.js

@@ -33,5 +33,15 @@ export default [
         data: asyncRoutesMap
       }
     }
+  },
+  {
+    url: '/routes',
+    type: 'put',
+    response: _ => {
+      return {
+        code: 20000,
+        data: {}
+      }
+    }
   }
 ]

src/api/route.js

@@ -6,3 +6,11 @@ export function getRoutes() {
     method: 'get'
   })
 }
+
+export function importRoutes(data) {
+  return request({
+    url: '/routes',
+    method: 'put',
+    data
+  })
+}

src/router/index.js

@@ -167,6 +167,15 @@ export const asyncRoutes = [
           title: 'Role Permission',
           roles: ['admin']
         }
+      },
+      {
+        path: 'path',
+        component: () => import('@/views/permission/route'),
+        name: 'Route',
+        meta: {
+          title: 'Route',
+          roles: ['admin']
+        }
       }
     ]
   },

src/views/permission/route.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="app-container">
+    <el-button type="primary" style="margin:0 0 20px 0;" @click="handleImport">Import Routes</el-button>
+
+    <el-table :data="routes" style="width: 100%;margin-bottom: 20px;" border row-key="path">
+      <el-table-column v-for="key in keys" :key="key" :prop="key" :label="key" sortable>
+        <template slot-scope="scope">
+          <span>{{ scope.row[key] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import * as Route from '@/api/route'
+import { routes } from '../../../mock/route'
+
+export default {
+  name: 'Route',
+  data() {
+    return {
+      keys: ['name', 'path', 'redirect', 'hidden', 'component', 'meta'],
+      routes: []
+    }
+  },
+  created() {
+    this.getRoutes()
+  },
+  methods: {
+    getRoutes() {
+      Route.getRoutes().then(res => {
+        const { data: routes } = res
+        this.routes = routes
+      })
+    },
+    handleImport() {
+      Route.importRoutes(routes).then(res => {
+        this.$message({
+          type: 'success',
+          message: 'Import Success'
+        })
+        this.getRoutes()
+      })
+    }
+  }
+}
+</script>
+