layout-------------模板包含菜单栏等主要框架
router--------------路由管理,根据路由可生成左侧菜单栏
/** When your routing table is too long, you can split it into small modules**/import Layout from '@/layout'var search = [{path: '/supervise/report',component: Layout,name: 'report',meta: { title: '**', icon: 'component' },children: [{path: 'reportCQL',component: () => import('@/views/supervise/report/reportCQL'),name: 'reportCQL',meta: { title: '**', icon: 'icon' }}------]},{path: '/supervise/search',component: Layout,name: 'search',meta: { title: '**', icon: 'component' },children: [{path: 'forestQuery',component: () => import('@/views/supervise/search/forestQuery'),name: 'forestQuery',meta: { title: '**', icon: 'search' }}]}]export default {getMenuMessage:function () {return search;}}
这是一简单路由，具体见https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html详解
views哈视图s-主要存放.vue也就是具体的页面，多级菜单路由生成
index.vue代码如下
{path: '/nested',component: Layout,redirect: '/nested/menu1',name: 'Nested',meta: {title: '**',icon: 'nested'},children: [{path: 'menu1',component: () => import('@/views/nested/menu1/index'), // Parent router-viewname: 'Menu1',meta: { title: '**' },children: [{path: 'houselist',component: () => import('@/views/house/houselist'),name: 'houselist',meta: { title: '**' },children: [。。。。。此处省略
然后回来看layout文件下
index.vue引入
import { Topbar, Navbar, Sidebar, AppMain } from “./components”;
…
components: {
Topbar,
Navbar,
Sidebar,
AppMain
},
…
export { default as Topbar } from './Topbar'export { default as Navbar } from './Navbar'export { default as Sidebar } from './Sidebar'export { default as AppMain } from './AppMain'
components下sidebar文件就是左侧菜单了
TopBar是我们的顶部菜单
<template><div><el-menu:default-active="activeIndex"class="topbar-menu"mode="horizontal"@select="handleSelect"background-color="#3a3a3a"text-color="#bfcbd9"active-text-color="#e7ae12"><a href="/"><img :src="logo" class="topbar-logo" :class="aWidth" /></a><div class="title" v-if="sidebar.opened">{{name}}</div><el-menu-item index="0"><a href="/" @click="toggle('0')">首页</a></el-menu-item><el-dropdown class="company-menu" style="margin-right:20px" @command="handleCommand"><span class="el-dropdown-link">{{myCompany}}<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="e">企业设置</el-dropdown-item><el-dropdown-item command="e">切换企业</el-dropdown-item><el-dropdown-item command="e" divided> 添加企业成员</el-dropdown-item></el-dropdown-menu></el-dropdown><div class="right-menu"><el-dropdown class="avatar-container" trigger="click"><div class="avatar-wrapper"><img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" /><i class="el-icon-caret-bottom" /></div><el-dropdown-menu slot="dropdown" class="user-dropdown"><router-link to="/user/userInfo"><el-dropdown-item><a href="/#/user/userInfo">基本信息</a></el-dropdown-item></router-link><router-link to="/user/SafetyManagement"><el-dropdown-item><a href="/#/user/SafetyManagement">安全管理</a></el-dropdown-item></router-link><el-dropdown-item divided><span style="display:block;" @click="logout">退出登录</span></el-dropdown-item></el-dropdown-menu></el-dropdown></div></el-menu></div></template>
然后怎么点击顶部菜单左侧菜单也变化-模块
首先要把router路由拆分开
在layout-components-Sidebar文件下index.vue改变菜单参数也就是将router的各个模块分别读取出来
到这里应该了解一下vuex的mapGetters
参考mapGetters
还有$store.dispatch
dispatch
routes(）返回的是菜单的参数，根据不同标识返回不同菜单，当然也可以将菜单存到后台，通过异步请求得到菜单
在顶部菜单Topbar中添加事件
store文件中，我添加到app中
import Cookies from 'js-cookie'const state = {menuIndex: {opened: Cookies.get('menuIndexStatus') ? Cookies.get('menuIndexStatus') : '0',withoutAnimation: false}}const mutations = {TOGGLE_MENU: (state, device) => {console.log(device)state.menuIndex.opened = devicestate.menuIndex.withoutAnimation = falseCookies.set('menuIndexStatus', device)}}const actions = {toggleMenu({ commit }, device) {commit('TOGGLE_MENU', device)}}export default {namespaced: true,state,mutations,actions}当点击菜单时会改变menuIndex.opened左菜单添加import { mapGetters } from "vuex";......computed: {...mapGetters([ 'menuIndex']),........```有点啰嗦，这里遇到了一个问题，不知道是我这里的问题，还是本身就会出现，当放大缩小浏览器会报TypeError: Cannot create property 'opened' on string 'desktop'"没有找到根本原因
