vue-cli 添加顶部导航栏及点击导航菜单，左侧菜单栏切换

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-view
        name: '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 = device
    state.menuIndex.withoutAnimation = false
    Cookies.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'"
没有找到根本原因