提交一下新的代码

src/components/HelloWorld.vue

 <template>
   <div>
     <el-container>
+      <!-- 我是头部代码 -->
       <el-header>
         <comHead></comHead>
       </el-header>
       <el-container>
+        <!-- 这里是侧边的啦 -->
         <el-aside width="200px">
           <side></side>
         </el-aside>
         <el-main>
+          <!-- 这里是视图部分的 -->
           <router-view/>
         </el-main>
       </el-container>
@@ -24,7 +27,7 @@ export default {
     side,
     comHead
   },
-  name: 'HelloWorld',
+  name: '我是主体',
   data () {
     return {
       activeKey: 0

src/components/head.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'HelloWorld',
+  name: '我是头部代码',
   data () {
     return {
     }

src/components/side.vue

@@ -21,7 +21,7 @@
 
 <script>
 export default {
-  name: 'HelloWorld',
+  name: '我是侧边栏',
   data () {
     return {
       activeKey: 0

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
+import login from '@/views/login/login'
 
 Vue.use(Router)
 
@@ -60,6 +61,11 @@ export default new Router({
           component: resolve => require(['@/views/lala5'], resolve) // 路由懒加载
         }
       ]
+    },
+    {
+      path: '/login',
+      name: 'HelloWorld',
+      component: login
     }
   ]
 })

src/views/login/login.vue

+<template>
+  <div class="hear-main">
+    我这里是登录的啦
+    <button @click="fnJump">登录成功lal</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '我是头部代码',
+  data () {
+    return {
+    }
+  },
+  methods: {
+    fnJump () {
+      this.$router.push({
+        path: '/lala'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .hear-main{
+    height: 50px;
+    background: #cccccc;
+    line-height: 50px;
+    text-align: center;
+  }
+</style>