问题修改

Author: 12345678

.DS_Store

@@ -18,6 +18,6 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  margin-top: 150px;
 }
 </style>

src/.DS_Store

@@ -1,33 +1,62 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-// import HelloWorld from '@/components/HelloWorld'
 import Login from '@/views/Login'
-import Home from '@/views/Home'
 import NotFound from '@/views/404'
+import Home from '@/views/Home'
+import Main from '@/views/Main'
+import User from '@/views/User'
+import Menu from '@/views/Menu'
+
+
+
 
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   routes: [
-    // {
-    //   path: '/',
-    //   name: 'HelloWorld',
-    //   component: HelloWorld
-    // },
     {
       path: '/',
-      name: 'Home',
-      component: Home
+      name: '首页',
+      component: Home,
+      children: [
+        { path: '/main', component: Main, name: '系统介绍' },
+        { path: '/user', component: User, name: '用户管理' },
+        { path: '/menu', component: Menu, name: '菜单管理' }
+      ]
     },
+ 
     {
       path: '/login',
-      name: 'Login',
+      name: '登录',
       component: Login
-    },
-    {
+    }
+    ,{
       path: '/404',
       name: 'notFound',
       component: NotFound
     }
   ]
-})
+})
+
+router.beforeEach((to, from, next) => {
+  // 登录界面登录成功之后，会把用户信息保存在会话
+  // 存在时间为会话生命周期，页面关闭即失效。
+  let user = sessionStorage.getItem('user');
+  if (to.path == '/login') {
+    // 如果是访问登录界面，如果用户会话信息存在，代表已登录过，跳转到主页
+    if(user) {
+      next({ path: '/' })
+    } else {
+      next()
+    }
+  } else {
+    // 如果访问非登录界面，且户会话信息不存在，代表未登录，则跳转到登录界面
+    if (!user) {
+      next({ path: '/login' })
+    } else {
+      next()
+    }
+  }
+})
+
+export default router

src/App.vue

@@ -1,13 +1,61 @@
 <template>
-    <div>
-        <h4>404 Page</h4>
+  <div class="site-wrapper site-page--not-found">
+    <div class="site-content__wrapper">
+      <div class="site-content">
+        <h2 class="not-found-title">404</h2>
+        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
+        <el-button @click="$router.go(-1)">返回上一页</el-button>
+        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
+      </div>
     </div>
+  </div>
 </template>
+
 <script>
-export default {
-    name:'notFound'
-}
+  export default {
+  }
 </script>
-<style scoped lang='scss'>
 
+<style lang="scss">
+  .site-wrapper.site-page--not-found {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    .site-content__wrapper {
+      padding: 0;
+      margin: 0;
+      background-color: #fff;
+    }
+    .site-content {
+      position: fixed;
+      top: 15%;
+      left: 50%;
+      z-index: 2;
+      padding: 30px;
+      text-align: center;
+      transform: translate(-50%, 0);
+    }
+    .not-found-title {
+      margin: 20px 0 15px;
+      font-size: 8em;
+      font-weight: 500;
+      color: rgb(55, 71, 79);
+    }
+    .not-found-desc {
+      margin: 0 0 30px;
+      font-size: 26px;
+      text-transform: uppercase;
+      color: rgb(118, 131, 143);
+      > em {
+        font-style: normal;
+        color: #ee8145;
+      }
+    }
+    .not-found-btn-gohome {
+      margin-left: 30px;
+    }
+  }
 </style>