Vue|el-menu及嵌套路由实现点击导航栏显示不同内容而导航栏不动功能 Vue|element

/*顶部样式*/ .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%; }

文章图片

这是我项目的主页面，主页面分为三个部分，上部的banner条，下面左边的导航栏，导航栏用el-menu编写，index后边的参数是组件路径

!-- 左侧导航 --> 火情共享平台监控历史火情统计

【Vue|el-menu及嵌套路由实现点击导航栏显示不同内容而导航栏不动功能】右边是内容展示部分，要实现的效果如上，点击左侧导航栏后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页面中，

这是afair组件里的右侧内容区，可以渲染指定路由对应的组件，可看成为容器，所渲染的组件是由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，这个在afaire组件里，当我点击mapshow，index会访问/mapshow路由，此时里面就会显示afaire的子路由/mapshow组件里面的内容，当点击PcMonitor时，访问/PcMonitor,此时显示/PcMonitor组件里面的内容。