输出代码vue使用element ui 的导航组件实现点击头部一级菜单，侧边栏二三级菜单联动切换，刷新页面是侧边栏菜单数据不丢失

好的，以下是代码示例：

<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @select="handleMenuSelect"
      :collapse="isCollapse"
      router
    >
      <el-submenu v-for="item in menuData" :key="item.id" :index="item.path">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="child in item.children" :key="child.id" :index="child.path">
          {{ child.title }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
    <el-button type="primary" @click="toggleCollapse">{{ isCollapse ? '展开' : '收起' }}</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          id: 1,
          path: '/dashboard',
          title: 'Dashboard',
          icon: 'el-icon-menu',
          children: [
            {
              id: 11,
              path: '/dashboard/overview',
              title: '概览'
            },
            {
              id: 12,
              path: '/dashboard/analysis',
              title: '分析'
            }
          ]
        },
        {
          id: 2,
          path: '/form',
          title: '表单页',
          icon: 'el-icon-document',
          children: [
            {
              id: 21,
              path: '/form/basic',
              title: '基础表单'
            },
            {
              id: 22,
              path: '/form/advanced',
              title: '高级表单'
            }
          ]
        },
        {
          id: 3,
          path: '/list',
          title: '列表页',
          icon: 'el-icon-tickets',
          children: [
            {
              id: 31,
              path: '/list/basic',
              title: '基础列表'
            },
            {
              id: 32,
              path: '/list/card',
              title: '卡片列表'
            }
          ]
        }
      ],
      isCollapse: false
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.$router.push(index)
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

这里使用了Element UI的Menu和Submenu组件来实现导航菜单，使用Vue Router实现路由跳转。当点击菜单项时，会触发handleMenuSelect方法，通过this.$router.push来跳转到对应的路由。同时，切换侧边栏的展开和收起状态，可以通过toggleCollapse方法来实现。在刷新页面时，可以使用Vuex或者localStorage等方式来保存菜单数据，以便在重新加载页面时恢复侧边栏菜单的状态。