<template>
|
<div class="pageLayout">
|
<div class="pageSlideMenu">
|
<page-menu></page-menu>
|
</div>
|
<div class="pageConten">
|
<page-header></page-header>
|
<div class="viewCon">
|
<div class="inner">
|
<transition :name="transitionName">
|
<!--这里的router-view用来渲染子页面-->
|
<router-view></router-view>
|
</transition>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import PageMenu from '@/components/PageMenu'
|
import PageHeader from '@/components/PageHeader'
|
const trsList = ['slide-left', 'slide-right', 'clip-circle-in', 'clip-triangle-in', 'clip-rect-in', 'clip-diamond-in', 'clip-rect-sp-in', 'clip-sector-in', 'seed', 'seed-hor', 'clip-rotate-in'];
|
const trsLen = trsList.length;
|
export default {
|
components: {
|
PageMenu,
|
PageHeader
|
},
|
data() {
|
return {
|
// transitionName: 'slide-left'
|
transitionName: 'clip-rotate-in'
|
,idx: 0
|
}
|
},
|
methods: {
|
random () {
|
let res = Math.floor(Math.random() * trsLen);
|
if (this.idx == res) {
|
return this.random();
|
}
|
return res;
|
}
|
},
|
mounted () {
|
this.$event.$on('routerChange', () => {
|
this.idx = this.random();
|
this.transitionName = trsList[this.idx];
|
});
|
},
|
beforeCreate() { //设置子路由路径
|
let activeMenu = localStorage.getItem('activeMenu');
|
// 当activeMenu 为 null时 输入的跳由应该不处理
|
// 当activeMenu 和路径相同时也不处理
|
// debugger;
|
if (!activeMenu || this.$route.path.indexOf(activeMenu) > -1) {
|
return false;
|
}
|
if (this.$route.path.indexOf('/index') > -1) {
|
if (activeMenu) {
|
|
this.$router.push({
|
path: `/index/${activeMenu}`,
|
}).catch(err => {
|
|
});
|
} else {
|
this.$router.push({
|
path: '/index/topoGraph',
|
}).catch(err => {
|
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.pageLayout {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
}
|
|
.pageSlideMenu {
|
padding-left: 5px;
|
padding-bottom: 8px;
|
width: 220px;
|
overflow-y: auto;
|
overflow-x: hidden;
|
}
|
|
.pageConten {
|
flex: 1;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.viewCon {
|
flex: 1;
|
/*padding: 8px 8px 0 18px;*/
|
/*width: 100%;*/
|
/*display: -webkit-flex;
|
display: flex;*/
|
position: relative;
|
/*height: calc(100% - 108px);*/
|
}
|
.inner {
|
position: absolute;
|
left: 18px;
|
top: 8px;
|
right: 8px;
|
bottom: 0;
|
overflow: hidden;
|
}
|
</style>
|
