From 87e060a7b46d85afe639b6acae102005be442e27 Mon Sep 17 00:00:00 2001
From: taylor <709161610@qq.com>
Date: Mon, 6 Feb 2017 22:49:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=BC=E8=88=AA=E5=92=8Cbr?=
 =?UTF-8?q?eadcrumb?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue        |  16 +----
 src/main.js        |  16 ++---
 src/pages/404.vue  |   3 +
 src/pages/Home.vue | 147 ++++++++++++++++++---------------------------
 src/routes.js      |  17 +++++-
 5 files changed, 85 insertions(+), 114 deletions(-)
 create mode 100644 src/pages/404.vue

diff --git a/src/App.vue b/src/App.vue
index b90d312..de2170f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,21 +11,7 @@
 	export default {
 		name: 'app',
 		components: {
-		},
-		// beforeCreate: function () {
-		// 	let user = JSON.parse(localStorage.getItem('user'));
-		// 	if (!user) {
-		// 		this.$router.replace('/login')
-		// 	}
-		// }
-		watch: {
-			'$route'(to, from) {//监听路由改变
-				let user = JSON.parse(sessionStorage.getItem('user'));
-				if (!user) {
-					this.$router.replace('/login')
-				}
-			}
-		},
+		}
 	}
 </script>
 
diff --git a/src/main.js b/src/main.js
index 34e845b..f65cd12 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,8 +9,6 @@ import Vuex from 'vuex'
 import NProgress from 'nprogress'//页面顶部进度条
 import 'nprogress/nprogress.css'
 import routes from './routes'
-
-// start mock
 import Mock from './mock';
 Mock.bootstrap();
 
@@ -25,17 +23,21 @@ const router = new VueRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  NProgress.start();
+  //NProgress.start();
+  if (to.path == '/login') {
+    sessionStorage.removeItem('user');
+  }
   let user = JSON.parse(sessionStorage.getItem('user'));
   if (!user && to.path != '/login') {
     next({ path: '/login' })
+  } else {
+    next()
   }
-  next()
 })
 
-router.afterEach(transition => {
-  NProgress.done();
-});
+//router.afterEach(transition => {
+//NProgress.done();
+//});
 
 new Vue({
   el: '#app',
diff --git a/src/pages/404.vue b/src/pages/404.vue
new file mode 100644
index 0000000..4269860
--- /dev/null
+++ b/src/pages/404.vue
@@ -0,0 +1,3 @@
+<template>
+    <p style="font-size:20px;text-align: center;color:rgb(192, 204, 218);">404</p>
+</template>
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 3a5964c..8077a31 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -2,86 +2,63 @@
 	<el-row class="panel">
 		<el-col :span="24" class="panel-top">
 			<el-col :span="20" style="font-size:26px;">
-<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
+				<img src="../assets/logo4.png" class="logo"> <span>AD<i style="color:#20a0ff">MIN</i>
 </span>
-</el-col>
-<el-col :span="4" class="rightbar">
-	<el-dropdown trigger="click">
-		<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}}
+			</el-col>
+			<el-col :span="4" class="rightbar">
+				<el-dropdown trigger="click">
+					<span class="el-dropdown-link" style="color:#c0ccda;cursor: pointer;"><img :src="this.sysUserAvatar" class="head"> {{sysUserName}}
 </span>
-<el-dropdown-menu slot="dropdown">
-	<el-dropdown-item>我的消息</el-dropdown-item>
-	<el-dropdown-item>设置</el-dropdown-item>
-	<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
-</el-dropdown-menu>
-</el-dropdown>
-<!--<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
-<i class="fa fa-sign-out" aria-hidden="true" v-on:click="logout"></i>
-</el-tooltip>-->
-</el-col>
-</el-col>
-<el-col :span="24" class="panel-center">
-	<!--<el-col :span="4">-->
-	<aside style="width:230px;">
-<!--<h5 class="admin">
-	<i class="fa fa-user" aria-hidden="true" style="margin-right:5px;"></i>欢迎系统管理员：测试</h5>-->
-<!--<el-menu style="border-top: 1px solid #475669;" default-active="/table" class="el-menu-vertical-demo" @open="handleopen"
-					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
-					<el-submenu index="1">
-						<template slot="title"><i class="el-icon-message"></i>导航一</template>
-						<el-menu-item index="/table">Table</el-menu-item>
-						<el-menu-item index="/form">Form</el-menu-item>
-						<el-menu-item index="/page3">页面3</el-menu-item>
-					</el-submenu>
-					<el-submenu index="2">
-						<template slot="title"><i class="fa fa-id-card-o"></i>导航二</template>
-						<el-menu-item index="/page4">选项4</el-menu-item>
-						<el-menu-item index="/page5">选项5</el-menu-item>
-					</el-submenu>
-					<el-menu-item index="/page6"><i class="fa fa-line-chart"></i>导航三</el-menu-item>
-				</el-menu>-->
-<el-menu :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
-	theme="dark" unique-opened router>
-	<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
-		<el-submenu :index="index+''" v-if="!item.leaf">
-			<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
-			<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
-		</el-submenu>
-		<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
-	</template>
-</el-menu>
-</aside>
-<!--</el-col>-->
-<!--<el-col :span="20" class="panel-c-c">-->
-<section class="panel-c-c">
-	<div class="grid-content bg-purple-light">
-		<el-col :span="24" style="margin-bottom:15px;">
-<strong style="width:200px;float:left;color: #475669;">{{currentPathName}}</strong>
-<el-breadcrumb separator="/" style="float:right;">
-<el-breadcrumb-item :to="{ path: '/table' }">首页</el-breadcrumb-item>
-<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
-<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
-</el-breadcrumb>
-</el-col>
-<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
-<!--<transition name="fade">-->
-<router-view></router-view>
-<!--</transition>-->
-</el-col>
-</div>
-</section>
-<!--</el-col>-->
-</el-col>
-</el-row>
+					<el-dropdown-menu slot="dropdown">
+						<el-dropdown-item>我的消息</el-dropdown-item>
+						<el-dropdown-item>设置</el-dropdown-item>
+						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
+					</el-dropdown-menu>
+				</el-dropdown>
+			</el-col>
+		</el-col>
+		<el-col :span="24" class="panel-center">
+			<!--<el-col :span="4">-->
+			<aside style="width:230px;">
+				<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
+					theme="dark" unique-opened router>
+					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
+						<el-submenu :index="index+''" v-if="!item.leaf">
+							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
+							<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
+						</el-submenu>
+						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
+					</template>
+					</el-menu>
+			</aside>
+			<!--</el-col>-->
+			<!--<el-col :span="20" class="panel-c-c">-->
+			<section class="panel-c-c">
+				<div class="grid-content bg-purple-light">
+					<el-col :span="24" style="margin-bottom:15px;">
+						<strong style="width:200px;float:left;color: #475669;">{{$route.name}}</strong>
+						<el-breadcrumb separator="/" style="float:right;">
+							<el-breadcrumb-item v-for="item in $route.matched">
+								{{ item.name }}
+							</el-breadcrumb-item>
+						</el-breadcrumb>
+					</el-col>
+					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
+						<!--<transition name="fade">-->
+						<router-view></router-view>
+						<!--</transition>-->
+					</el-col>
+				</div>
+			</section>
+			<!--</el-col>-->
+		</el-col>
+	</el-row>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-				currentPath: '/table',
-				currentPathName: 'Table',
-				currentPathNameParent: '导航一',
 				sysUserName: '',
 				sysUserAvatar: '',
 				form: {
@@ -96,13 +73,6 @@
 				}
 			}
 		},
-		watch: {
-			'$route'(to, from) {//监听路由改变
-				this.currentPath = to.path;
-				this.currentPathName = to.name;
-				this.currentPathNameParent = to.matched[0].name;
-			}
-		},
 		methods: {
 			onSubmit() {
 				console.log('submit!');
@@ -122,7 +92,7 @@
 					//type: 'warning'
 				}).then(() => {
 					sessionStorage.removeItem('user');
-					_this.$router.replace('/login');
+					_this.$router.push('/login');
 				}).catch(() => {
 
 				});
@@ -131,10 +101,6 @@
 			}
 		},
 		mounted() {
-			this.currentPath = this.$route.path;
-			this.currentPathName = this.$route.name;
-			this.currentPathNameParent = this.$route.matched[0].name;
-
 			var user = sessionStorage.getItem('user');
 			if (user) {
 				user = JSON.parse(user);
@@ -143,6 +109,7 @@
 			}
 		}
 	}
+
 </script>
 
 <style scoped>
@@ -169,18 +136,18 @@
 		background: #1F2D3D;
 		color: #c0ccda;
 	}
-
-	.panel-top .rightbar{
+	
+	.panel-top .rightbar {
 		text-align: right;
 		padding-right: 35px;
 	}
-
-	.panel-top .rightbar .head{
+	
+	.panel-top .rightbar .head {
 		width: 40px;
-    	height: 40px;
+		height: 40px;
 		border-radius: 20px;
 		margin: 10px 0px 10px 10px;
-    	float: right;
+		float: right;
 	}
 	
 	.panel-center {
diff --git a/src/routes.js b/src/routes.js
index d1915b7..862c7cd 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -1,4 +1,5 @@
 import Login from './pages/Login.vue'
+import NotFound from './pages/404.vue'
 import Home from './pages/Home.vue'
 import Main from './pages/Main.vue'
 import Table from './pages/nav1/Table.vue'
@@ -13,7 +14,14 @@ let routes = [
     {
         path: '/login',
         component: Login,
-        hidden: true//不显示在导航中
+        name: '',
+        hidden: true
+    },
+    {
+        path: '/404',
+        component: NotFound,
+        name: '',
+        hidden: true
     },
     //{ path: '/main', component: Main },
     {
@@ -22,7 +30,7 @@ let routes = [
         name: '导航一',
         iconCls: 'el-icon-message',//图标样式class
         children: [
-            //{ path: '/main', component: Main },
+            { path: '/main', component: Main, name: '主页', hidden: true },
             { path: '/table', component: Table, name: 'Table' },
             { path: '/form', component: Form, name: 'Form' },
             { path: '/user', component: user, name: '列表' },
@@ -56,6 +64,11 @@ let routes = [
         children: [
             { path: '/echarts', component: echarts, name: 'echarts' }
         ]
+    },
+    {
+        path: '*',
+        hidden: true,
+        redirect: { path: '/404' }
     }
 ];