Browse Source

优化导航和breadcrumb

master
taylor 8 years ago
parent
commit
87e060a7b4
  1. 16
      src/App.vue
  2. 16
      src/main.js
  3. 3
      src/pages/404.vue
  4. 147
      src/pages/Home.vue
  5. 17
      src/routes.js

16
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>

16
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',

3
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>

147
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 {

17
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' }
}
];
Loading…
Cancel
Save