<template>
<div id="test">
<div id="container-fluid">
<!--顶部-->
<div class="row head">
<div class="header">
<div class="logo"><img style="margin-left: 25px;max-height: inherit;" alt="中科锐景科技有限公司"
src="../../static/images/logo_main.png"></div>
<div class="user" id="user">当前用户:
柴
<a href="/stalkdev/logout.asp">退出</a>
</div>
</div>
</div>
<!-- 左侧导航 -->
<div class="lfmenu">
<div class="menu_content">
<div class="list-group">
<el-menu default-active="/MapShow" class="list-group-item" router>
<el-menu-item index="/MapShow" class="list-group-item" :class="{'isActive': !active}">火情共享</el-menu-item>
<el-menu-item index="/PcMonitor" class="list-group-item" :class="{'isActive': !active}">平台监控
</el-menu-item>
<el-menu-item index="/HistoryFire" class="list-group-item" :class="{'isActive': !active}">历史火情
</el-menu-item>
<el-menu-item index="/TongJi" class="list-group-item" :class="{'isActive': !active}">统计</el-menu-item>
</el-menu>
</div>
</div>
</div>
<!-- 右侧主内容区 -->
<div id="main-container">
<!--<div class="mainbox" style="padding: 10px;padding-right: 15px;">-->
<!--<div class="panel-body">-->
<!--<div style="background: #ffffff;margin-top: 10px;"></div>-->
<!--</div>-->
<!--</div>-->
<router-view class="view"></router-view>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(Element)
window.usermap_center = [111, 30.03]
window.usermap_zoom = 0
window.usermap_extend = [0, 0, 180, 90]
export default {
name: 'afire',
data: function () {
return {active: true}
},
computed: {
MapShow() {
}
}
} </script>
<style>
/*顶部样式*/
.header {
width: 100%;
height: 69px;
background: #FFDC6E;
background-size: cover;
vertical-align: middle;
display: list-item;
line-height: 69px;
max-height: 69px;
position: relative;
}
.logo {
width: 230px;
height: 69px;
background: #FFDC6E;
float: left;
padding-top: 5px;
}
.user {
float: right;
width: auto;
height: 30px;
margin-top: 25px;
margin-right: 30px;
line-height: 1em;
}
.user
a {
color: #000;
}
.menu_content {
width: 230px;
/*height: -webkit-fill-available;*/
height: 100%;
background: #323232;
}
.menu_content .list-group .list-group-item_text {
width: 230px;
display: block;
padding: 15px;
background: #262626;
}
.menu_content .list-group .list-group-item {
text-align: center;
padding: 0px;
border: 0px;
border-bottom: 1px solid #3a3a3a;
margin: 0px;
}
.lfmenu {
position: absolute;
height: 100%;
left: 0px;
top: 69px;
background: #323232;
}
.row {
margin-top: -8px;
margin-right: -15px;
margin-left: -15px;
}
.menu_content .list-group .list-group-item_text {
width: 230px;
display: block;
padding: 15px;
background: #262626;
}
.el-menu {
background-color: #262626;
}
.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover, .el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover, .el-menu-item:hover {
background-color: #262626;
}
.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
color: #FFDC6E;
}
.el-menu-item, .el-submenu__title {
color: #fff;
}
.mainbox {
width: auto;
margin-left: 230px;
height: 100%;
}
</style>
这是我项目的主页面,主页面分为三个部分,上部的banner条,下面左边的导航栏,导航栏用el-menu编写,index后边的参数是组件路径
!-- 左侧导航 -->
<div class="lfmenu">
<div class="menu_content">
<div class="list-group">
<el-menu default-active="/MapShow" class="list-group-item" router>
<el-menu-item index="/MapShow" class="list-group-item" :class="{'isActive': !active}">火情共享</el-menu-item>
<el-menu-item index="/PcMonitor" class="list-group-item" :class="{'isActive': !active}">平台监控
</el-menu-item>
<el-menu-item index="/HistoryFire" class="list-group-item" :class="{'isActive': !active}">历史火情
</el-menu-item>
<el-menu-item index="/TongJi" class="list-group-item" :class="{'isActive': !active}">统计</el-menu-item>
</el-menu>
</div>
</div>
</div>
右边是内容展示部分,要实现的效果如上,点击左侧导航栏后banner条和导航栏均不动,只有右侧的内容部分改变,解决这个问题的方法是利用嵌套路由,我直接在cli生成的router文件下的index.js编写,整个路由文件如下
import Vue from 'vue'
import Router from 'vue-router'
import afire from '@/components/afire'
import MapShow from '@/components/MapShow'
import PcMonitor from '@/components/PcMonitor'
import HistoryFire from '@/components/HistoryFire'
import TongJi from '@/components/TongJi'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'afire',
component: afire,
children:[
{
path: '/MapShow',
name: 'MapShow',
component: MapShow
},
{
path: '/PcMonitor',
name: 'PcMonitor',
component: PcMonitor
},
{
path: '/HistoryFire',
name: 'HistoryFire',
component: HistoryFire
},
{
path: '/TongJi',
name: 'TongJi',
component: TongJi
}
]
},
]
})
afaire是主页,其他组件是afaire的子组件,也就是其他页面包含在afaire页面中,
<!-- 右侧主内容区 -->
<div id="main-container">
<!--<div class="mainbox" style="padding: 10px;padding-right: 15px;">-->
<!--<div class="panel-body">-->
<!--<div style="background: #ffffff;margin-top: 10px;"></div>-->
<!--</div>-->
<!--</div>-->
<router-view class="view"></router-view>
</div>
这是afair组件里的右侧内容区,<router-view>可以渲染指定路由对应的组件,可看成为容器,所渲染的组件是由router指定,我们的路由
routes: [
{
path: '/',
name: 'afire',
component: afire,
children:[
{
path: '/MapShow',
name: 'MapShow',
component: MapShow
},
{
path: '/PcMonitor',
name: 'PcMonitor',
component: PcMonitor
},
{
path: '/HistoryFire',
name: 'HistoryFire',
component: HistoryFire
},
{
path: '/TongJi',
name: 'TongJi',
component: TongJi
}
]
我自己的理解就是afire下有子路由/mapshow、/PcMonitor,这个<router-view>在afaire组件里,当我点击mapshow,index会访问/mapshow路由,此时<router-view>里面就会显示afaire的子路由/mapshow组件里面的内容,当点击PcMonitor时,访问/PcMonitor,此时显示/PcMonitor组件里面的内容。