完善项目

package-lock.json

@@ -6232,6 +6232,11 @@
         "set-blocking": "~2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",

package.json

@@ -40,6 +40,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
+    "nprogress": "^0.2.0",
     "vue-router": "^3.0.3",
     "vuex": "^3.1.0"
   }

src/main.js

@@ -2,12 +2,24 @@ import Vue from 'vue';
 import App from './App.vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+// 路由跳转进度条
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
 import './index.css';
 import router from './router/router';
 import store from './store';
 
 Vue.use(ElementUI);
 
+router.beforeEach((to, from, next) => {
+  NProgress.start();
+  next()
+});
+
+router.afterEach(transition => {
+  NProgress.done();
+});
+
 new Vue({
   el: '#app',
   router,

src/pages/index/Index.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+      name: admin
+  </div>
+</template>
+

src/pages/layout/leftnav/LeftNav.vue

@@ -2,11 +2,15 @@
   <div class="left-nav">
     <el-menu
       class="el-menu-vertical-demo"
-      background-color="#545c64"
-      text-color="#fff"
-      active-text-color="#ffd04b"
+      background-color="#324157"
+      text-color="#bfcbd9"
+      active-text-color="#20a0ff"
       :router=true
       :default-active="$route.path">
+      <el-menu-item index="/dashboard/index" route="/dashboard/index">
+        <i class="el-icon-menu"></i>
+        <span slot="title">首页</span>
+      </el-menu-item>
       <el-menu-item index="/nav/nav1" route="/nav/nav1">
         <i class="el-icon-menu"></i>
         <span slot="title">导航二</span>
@@ -22,7 +26,10 @@
   .left-nav {
     width: 200px;
     height: 100%;
-    background-color: rgb(84, 92, 100);
+    background-color: #324157;
+    .el-menu {
+      border: none;
+    }
   }
 </style>
 

src/pages/layout/toptitle/TopTitle.vue

@@ -1,13 +1,79 @@
 <template>
   <div class="top-title">
-    上边
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item>您的位置：</el-breadcrumb-item>
+        <el-breadcrumb-item :to="item.url" v-for="item of breadListLast" :key="item.url">
+          {{item.title}}
+        </el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-dropdown>
+      <div class="avator">
+        <img src="../../../assets/img/default.jpg" alt="">
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>退出登录</el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 <style lang="scss">
   .top-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
-    height:80px;
-    background: skyblue;
+    height: 50px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+    background: #eff2f7;
+    padding: 0 20px;
+    box-sizing: border-box;
+    .avator {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        width:  100%;
+        height: 100%;
+      }
+    }
   }
 </style>
+<script>
+export default {
+    //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
+    data() {
+      return {
+        breadListLast: []
+      };
+    },
+    methods: {
+      loadChange() {
+        const router = this.$router.options.routes;
+        router.forEach(element => {
+          if(element.children) {
+            element.children.forEach(item => {
+              if (this.$route.path.indexOf(item.meta.url) !== -1) {
+                console.log(item.meta)
+                this.breadListLast.push(item.meta);
+                if(this.breadListLast.length > 1) {
+                  this.breadListLast.shift();
+                }
+              }
+            })
+          }
+        });
+      }
+    },
+    watch: {
+      $route(to, from) {
+        this.loadChange()
+      }
+    },
+    //页面挂载之后,解析路由，给出面包屑，路由里面一定要含有breadCom组件的path
+    mounted: function () {
+      this.loadChange()
+    }
+}
+</script>
 

src/pages/login/Login.vue

@@ -2,11 +2,11 @@
   <div class="login-container">
     <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" autocomplete="off" class="login-form">
       <h3 class="title">登录</h3>
-      <el-form-item label="账号" prop="userName" class="el-form-item" label-width="50px">
-        <el-input v-model="loginForm.userName" name="userName" type="text" autocomplete="off" placeholder="userName"/>
+      <el-form-item prop="userName" class="el-form-item">
+        <el-input v-model="loginForm.userName" name="userName" type="text" autocomplete="off" placeholder="账号"/>
       </el-form-item>
-      <el-form-item label="密码" prop="password" class="el-form-item" label-width="50px">
-        <el-input type="password" v-model="loginForm.password" autocomplete="off" show-password placeholder="password"/>
+      <el-form-item prop="password" class="el-form-item">
+        <el-input type="password" v-model="loginForm.password" autocomplete="off" show-password placeholder="密码"/>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
@@ -64,6 +64,8 @@
             // const password = this.loginForm.password;
             this.$store.dispatch('Login', this.loginForm).then(() => {
               alert('登录成功');
+              this.$router.push({ path: '/nav/nav1' })
+              // router.push({ path: '/nav/nav1' })
             }).catch(() => {
               alert('登录失败');
             })

src/router/router.js

@@ -18,18 +18,31 @@ export default new Router({
       path: '/',
       name:'layout',
       component: Layout,
+      redirect: '/login',
       hidden: true
     },
     {
+      path: '/dashboard',
+      component: Layout,
+      children: [{
+        path: 'index',
+        name:'Index',
+        meta: { title: '首页', url: '/dashboard/index' },
+        component: () => import('@/pages/index/Index'),
+      }]
+    },
+    {
       path: '/nav',
       component: Layout,
       children: [{
         path: 'nav1',
         name:'Nav1',
+        meta: { title: 'nav1', url: '/nav/nav1' },
         component: () => import('@/pages/nav1/Nav1'),
       },{
         path: 'nav2',
         name:'Nav2',
+        meta: { title: 'nav2', url: '/nav/nav2' },
         component: () => import('@/pages/nav2/Nav2'),
       }]
     }