wangtong/CVEO-water-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Releases 1 Wiki Activity

lazy路由加载

Browse Source
This commit is contained in:
王铜 2020-11-30 12:01:35 +08:00
parent 9dbeeeec35
commit 1f09e43e44
2 changed files with 76 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/Main.vue
View File

@ -1,27 +1,29 @@
<template>
<a-layout>
<a-layout-header style="height: 110px;">
<a-row>
<a-col :span="12" style="color:white;">
<a-layout-header style="height: 110px">
<a-row>
<a-col :span="12" style="color: white">
<span class="w-title">水质监测平台</span>
</a-col>
<a-col :span="2" :offset="10">
<a-popover :title="username" trigger="hover" placement="bottom">
<template slot="content">
<p v-if="!isAnyone" style="cursor: pointer;" @click="changePasswd">
<p v-if="!isAnyone" style="cursor: pointer" @click="changePasswd">
更改密码
</p>
<p style="cursor: pointer;" @click="logout">
登出
</p>
<p style="cursor: pointer" @click="logout">登出</p>
</template>
<a-avatar :size="48" icon="user" />
</a-popover>
</a-col>
</a-row>
</a-row>
<a-row>
<a-menu v-model="current" mode="horizontal" theme="dark" @click="handleMenuClick">
<a-menu
v-model="current"
mode="horizontal"
theme="dark"
@click="handleMenuClick"
>
<a-menu-item key="map-layout">
<icon-font type="wt-iconmap" />主页
</a-menu-item>
@ -29,7 +31,9 @@
<span slot="title" class="submenu-title-wrapper"
><icon-font type="wt-iconsearch" />数据查询</span
>
<a-menu-item key="detail-search"> <icon-font type="wt-iconxiangxi" />详细数据 </a-menu-item>
<a-menu-item key="detail-search">
<icon-font type="wt-iconxiangxi" />详细数据
</a-menu-item>
</a-sub-menu>
<a-menu-item key="analysis">
<icon-font type="wt-iconfenxi" />图形分析
@ -37,84 +41,90 @@
<a-menu-item key="admin" v-if="isAdmin">
<icon-font type="wt-iconhoutai" />后台管理
</a-menu-item>
</a-menu>
</a-row>
</a-layout-header>
<a-layout-content>
<keep-alive exclude="map-layout">
<component :is="currentComp"/>
<keep-alive>
<router-view />
</keep-alive>
</a-layout-content>
<a-modal
<a-modal
v-model="passwd_visible"
:title="'更改密码'"
:destroyOnClose="true"
:footer="null"
>
<password-change
@ok="logout"
@cancle="passwd_visible = false"
/>
<password-change @ok="logout" @cancle="passwd_visible = false" />
</a-modal>
</a-layout>
</template>
<script>
import IconFont from "@/components/icon";
// import MapLayout from "@/components/map/Index";
// import DetailSearch from "@/components/search/Index";
// import Analysis from "@/components/analysis/Index";
import IconFont from '@/components/icon'
import MapLayout from '@/components/map/Index'
import DetailSearch from '@/components/search/Index'
import Analysis from '@/components/analysis/Index'
import Logs from '@/components/logs/Index'
import Admin from '@/components/admin/Index'
import { logout } from '@/utils/http'
import PasswordChange from './admin/forms/PasswordChange.vue'
import Logs from "@/components/logs/Index";
import Admin from "@/components/admin/Index";
import { logout } from "@/utils/http";
import PasswordChange from "./admin/forms/PasswordChange.vue";
export default {
components: {
'icon-font':IconFont,
'map-layout':MapLayout,
'detail-search':DetailSearch,
'analysis':Analysis,
"icon-font": IconFont,
// "map-layout": MapLayout,
// "detail-search": DetailSearch,
// analysis: Analysis,
// 'logs':Logs,
'admin':Admin,
PasswordChange
// admin: Admin,
PasswordChange,
},
data() {
return {
current:['map-layout'],
currentComp: 'map-layout',
passwd_visible: false
current: ["map-layout"],
currentComp: "map-layout",
passwd_visible: false,
};
},
watch:{
currentComp: function(old, newVal) {
this.$router.push({
name: this.currentComp
})
}
},
computed: {
isAdmin() {
return this.$store.getters.isSuper || this.$store.getters.isProject
return this.$store.getters.isSuper || this.$store.getters.isProject;
},
isAnyone() {
return this.$store.getters.isAnyone
return this.$store.getters.isAnyone;
},
username() {
return this.$store.getters.username
}
return this.$store.getters.username;
},
},
methods: {
handleMenuClick({item, key, keyPath}) {
this.currentComp = key
handleMenuClick({ item, key, keyPath }) {
this.currentComp = key;
},
logout() {
logout()
sessionStorage.clear()
this.$store.commit('logout')
logout();
sessionStorage.clear();
this.$store.commit("logout");
this.$router.push({
path: '/login'
})
path: "/login",
});
},
changePasswd() {
this.passwd_visible = true
}
this.passwd_visible = true;
},
},
mounted() {
// this.$router.push({
// name:this.currentComp
// })
}
};
</script>
@ -126,11 +136,10 @@ export default {
.ant-layout-content {
height: calc(100vh - 110px);
}
.w-title{
color: white;
line-height: 50px;
font-size: 24px;
font-weight: 600;
.w-title {
color: white;
line-height: 50px;
font-size: 24px;
font-weight: 600;
}
</style>

11
src/utils/router.js
View File

@ -4,8 +4,16 @@ import Index from '@/components/Main'
import Login from '@/components/Login'
import store from './store'
import { setAuth } from './http'
Vue.use(Router)
const funcRoutes = [
{ path:'map-layout', name:'map-layout', component: ()=>import(/* webpackChunkName: "map-layout" */ '@/components/map/Index' ) },
{ path:'detail-search', name:'detail-search', component: ()=>import(/* webpackChunkName: "detail-search" */ '@/components/search/Index' ) },
{ path:'admin', name:'admin', component: ()=>import(/* webpackChunkName: "admin" */ '@/components/admin/Index' ) },
{ path:'analysis', name:'analysis', component: ()=>import(/* webpackChunkName: "analysis" */ '@/components/analysis/Index' ) },
]
const routes = [
{
path: '/',
@ -14,7 +22,8 @@ const routes = [
{
path: '/index',
name: 'index',
component: Index,
component: () => import(/* webpackChunkName: "index" */ '@/components/Main'),
children: funcRoutes,
meta: {
requireAuth: true
}