ops
/
jump-web
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

优化导航和breadcrumb

master
taylor 9 years ago
parent
15e90ba9f0
commit
87e060a7b4
5 changed files with 85 additions and 114 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -11,21 +11,7 @@
export default { export default {
name: 'app', name: 'app',
components: { 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> </script>

16
src/main.js
View File

@ -9,8 +9,6 @@ import Vuex from 'vuex'
import NProgress from 'nprogress'//页面顶部进度条 import NProgress from 'nprogress'//页面顶部进度条
import 'nprogress/nprogress.css' import 'nprogress/nprogress.css'
import routes from './routes' import routes from './routes'
// start mock
import Mock from './mock'; import Mock from './mock';
Mock.bootstrap(); Mock.bootstrap();
@ -25,17 +23,21 @@ const router = new VueRouter({
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
NProgress.start();
//NProgress.start();
if (to.path == '/login') {
sessionStorage.removeItem('user');
}
let user = JSON.parse(sessionStorage.getItem('user')); let user = JSON.parse(sessionStorage.getItem('user'));
if (!user && to.path != '/login') { if (!user && to.path != '/login') {
next({ path: '/login' }) next({ path: '/login' })
} else {
next()
} }
next()
}) })
router.afterEach(transition => {
NProgress.done();
});
//router.afterEach(transition => {
//NProgress.done();
//});
new Vue({ new Vue({
el: '#app', el: '#app',

3
src/pages/404.vue
View File

@ -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
View File

@ -2,86 +2,63 @@
<el-row class="panel"> <el-row class="panel">
<el-col :span="24" class="panel-top"> <el-col :span="24" class="panel-top">
<el-col :span="20" style="font-size:26px;"> <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> </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> </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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
currentPath: '/table',
currentPathName: 'Table',
currentPathNameParent: '导航一',
sysUserName: '', sysUserName: '',
sysUserAvatar: '', sysUserAvatar: '',
form: { form: {
@ -96,13 +73,6 @@
} }
} }
}, },
watch: {
'$route'(to, from) {//监听路由改变
this.currentPath = to.path;
this.currentPathName = to.name;
this.currentPathNameParent = to.matched[0].name;
}
},
methods: { methods: {
onSubmit() { onSubmit() {
console.log('submit!'); console.log('submit!');
@ -122,7 +92,7 @@
//type: 'warning' //type: 'warning'
}).then(() => { }).then(() => {
sessionStorage.removeItem('user'); sessionStorage.removeItem('user');
_this.$router.replace('/login');
_this.$router.push('/login');
}).catch(() => { }).catch(() => {
}); });
@ -131,10 +101,6 @@
} }
}, },
mounted() { mounted() {
this.currentPath = this.$route.path;
this.currentPathName = this.$route.name;
this.currentPathNameParent = this.$route.matched[0].name;
var user = sessionStorage.getItem('user'); var user = sessionStorage.getItem('user');
if (user) { if (user) {
user = JSON.parse(user); user = JSON.parse(user);
@ -143,6 +109,7 @@
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
@ -169,18 +136,18 @@
background: #1F2D3D; background: #1F2D3D;
color: #c0ccda; color: #c0ccda;
} }
.panel-top .rightbar{
.panel-top .rightbar {
text-align: right; text-align: right;
padding-right: 35px; padding-right: 35px;
} }
.panel-top .rightbar .head{
.panel-top .rightbar .head {
width: 40px; width: 40px;
height: 40px;
height: 40px;
border-radius: 20px; border-radius: 20px;
margin: 10px 0px 10px 10px; margin: 10px 0px 10px 10px;
float: right;
float: right;
} }
.panel-center { .panel-center {

17
src/routes.js
View File

@ -1,4 +1,5 @@
import Login from './pages/Login.vue' import Login from './pages/Login.vue'
import NotFound from './pages/404.vue'
import Home from './pages/Home.vue' import Home from './pages/Home.vue'
import Main from './pages/Main.vue' import Main from './pages/Main.vue'
import Table from './pages/nav1/Table.vue' import Table from './pages/nav1/Table.vue'
@ -13,7 +14,14 @@ let routes = [
{ {
path: '/login', path: '/login',
component: Login, component: Login,
hidden: true//不显示在导航中
name: '',
hidden: true
},
{
path: '/404',
component: NotFound,
name: '',
hidden: true
}, },
//{ path: '/main', component: Main }, //{ path: '/main', component: Main },
{ {
@ -22,7 +30,7 @@ let routes = [
name: '导航一', name: '导航一',
iconCls: 'el-icon-message',//图标样式class iconCls: 'el-icon-message',//图标样式class
children: [ children: [
//{ path: '/main', component: Main },
{ path: '/main', component: Main, name: '主页', hidden: true },
{ path: '/table', component: Table, name: 'Table' }, { path: '/table', component: Table, name: 'Table' },
{ path: '/form', component: Form, name: 'Form' }, { path: '/form', component: Form, name: 'Form' },
{ path: '/user', component: user, name: '列表' }, { path: '/user', component: user, name: '列表' },
@ -56,6 +64,11 @@ let routes = [
children: [ children: [
{ path: '/echarts', component: echarts, name: 'echarts' } { path: '/echarts', component: echarts, name: 'echarts' }
] ]
},
{
path: '*',
hidden: true,
redirect: { path: '/404' }
} }
]; ];
Write Preview
Loading…
Cancel
Save