路由修改

src/layout/design-header.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-menu :default-active="1" class="el-menu-demo" mode="horizontal" >
+        <el-menu-item index="1">
+            <RouterLink to="/design/test1">演示Demo</RouterLink>
+        </el-menu-item>
+        <el-submenu index="2">
+            <template slot="title">我的工作台</template>
+            <el-menu-item index="2-1">选项1</el-menu-item>
+            <el-menu-item index="2-2">选项2</el-menu-item>
+            <el-menu-item index="2-3">选项3</el-menu-item>
+            <el-submenu index="2-4">
+                <template slot="title">选项4</template>
+                <el-menu-item index="2-4-1">选项1</el-menu-item>
+                <el-menu-item index="2-4-2">选项2</el-menu-item>
+                <el-menu-item index="2-4-3">选项3</el-menu-item>
+            </el-submenu>
+        </el-submenu>
+        <el-menu-item index="3" disabled>消息中心</el-menu-item>
+        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+    </el-menu>
+</template>
+
+
+<script>
+    export default {
+        name: 'DesignHeader'
+    }
+</script>
+
+<style scoped>
+
+</style>

src/layout/design-layout.vue

@@ -0,0 +1,29 @@
+<template>
+    <el-container>
+        <el-header>
+            <design-header/>
+        </el-header>
+        <el-main>
+            <router-view/>
+        </el-main>
+        <el-footer>Footer</el-footer>
+    </el-container>
+</template>
+<script>
+    import DesignHeader from './design-header'
+
+    export default {
+        name: 'DesignLayout',
+        data() {
+            return {}
+        },
+        components: {
+            DesignHeader
+        },
+        methods: {}
+    }
+</script>
+
+<style scoped>
+
+</style>

src/router/modules/design.js

@@ -0,0 +1,22 @@
+import DesignLayout from '@/layout/design-layout'
+
+export default {
+    path: '/design',
+    meta: {
+        requireLogin: true
+    },
+    redirect: '/design/test1',
+    component: DesignLayout,
+    children: [
+        {
+            path: 'test1',
+            component: () =>
+                import(/* webpackChunkName: 'example' */ '@/views/design/test1.vue')
+        },
+        {
+            path: 'test2',
+            component: () =>
+                import(/* webpackChunkName: 'example' */ '@/views/design/test2.vue')
+        }
+    ]
+}

src/router/modules/root.js

@@ -1,10 +1,13 @@
 export default [
     {
         path: '/',
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/index.vue')
+        meta: {
+            requireLogin: true
+        },
+        component: () => import(/* webpackChunkName: 'root' */ '@/layout/design-layout.vue')
     },
     {
         path: '/login',
-        component: () => import(/* webpackChunkName: 'root' */ '@/views/login.vue')
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/design/login.vue')
     }
 ]

src/views/design/index.vue

@@ -0,0 +1,30 @@
+<template>
+    <el-container>
+        <el-header>
+            <design-header/>
+        </el-header>
+        <el-main>
+            <router-view></router-view>
+        </el-main>
+        <el-footer>Footer</el-footer>
+    </el-container>
+    <!--        <RouterLink to="/example">演示Demo</RouterLink>-->
+</template>
+<script>
+    import DesignHeader from '../../layout/design-header'
+
+    export default {
+        name: 'index',
+        data() {
+            return {}
+        },
+        components: {
+            DesignHeader
+        },
+        methods: {}
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/design/login.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <el-container>
+            <el-header>
+                <el-menu  class="el-menu-demo" mode="horizontal" >
+                    <el-menu-item route="1">
+                        <el-image
+                            style="width: 100px; height: 100px"
+                            :src="url"
+                            :fit="fit"></el-image>
+                    </el-menu-item>
+                    <el-menu-item route="1">企业部署</el-menu-item>
+                    <el-menu-item route="3" >开源版本</el-menu-item>
+                    <el-menu-item route="4">提出建议</el-menu-item>
+                </el-menu>
+            </el-header>
+            <el-main>Main</el-main>
+            <el-footer>Footer</el-footer>
+        </el-container>
+<!--        <button @click="login">模拟登录</button>-->
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        login() {
+            this.$store.dispatch('token/login').then(() => {
+                // 登录成功后路由跳回
+                if (this.$route.query.redirect) {
+                    this.$router.replace({
+                        path: this.$route.query.redirect
+                    })
+                } else {
+                    if (window.history.length <= 1) {
+                        this.$router.push({ path: '/' })
+                    } else {
+                        this.$router.go(-1)
+                    }
+                }
+            })
+        }
+    }
+}
+</script>

src/views/design/test1.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        test1
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'test1'
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/design/test2.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        test2
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'test2'
+    }
+</script>
+
+<style scoped>
+
+</style>

src/views/index.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <RouterLink to="/example">演示Demo</RouterLink>
-    </div>
-</template>

src/views/login.vue

@@ -1,28 +0,0 @@
-<template>
-    <div>
-        <button @click="login">模拟登录</button>
-    </div>
-</template>
-
-<script>
-export default {
-    methods: {
-        login() {
-            this.$store.dispatch('token/login').then(() => {
-                // 登录成功后路由跳回
-                if (this.$route.query.redirect) {
-                    this.$router.replace({
-                        path: this.$route.query.redirect
-                    })
-                } else {
-                    if (window.history.length <= 1) {
-                        this.$router.push({ path: '/' })
-                    } else {
-                        this.$router.go(-1)
-                    }
-                }
-            })
-        }
-    }
-}
-</script>