在main.vue 和left-menu.vue中给出更加详细的代码

当然可以。以下是更详细的 `main.vue` 和 `left-menu.vue` 代码示例：

### main.vue

<!-- main.vue -->
<template>
  <div id="app">
    <header>首页标题</header>
    <router-view></router-view> <!-- 渲染当前路由对应的组件 -->
    <left-menu :menu-items="menuItems"></left-menu> <!-- 通过 props 接收左侧菜单数据 -->
  </div>
</template>

<script>
import { mapState } from 'vuex' // 使用 Vuex 的 mapState 映射状态到组件属性

export default {
  name: 'App',
  components: {
    LeftMenu,
  },
  computed: {
    ...mapState(['menuItems']), // 获取 store 中的 menuItems
  },
  created() {
    this.$store.dispatch('loadMenuItems') // 启动异步获取菜单数据
  },
  methods: {},
}
</script>

<style>
/* CSS 样式省略 */
</style>

### left-menu.vue

<!-- left-menu.vue -->
<template>
  <ul class="left-menu">
    <li v-for="(item, index) in menuItems" :key="index">
      <a :to="{ name: 'menuItemRoute', params: { itemKey: item.key }}" v-if="item.children === undefined">{{ item.name }}</a>
      <!-- 如果有子菜单，则展开二级菜单 -->
      <ul v-if="item.children" class="sub-menu">
        <li v-for="(child, subIndex) in item.children" :key="subIndex">
          <a :to="{ name: 'menuChildRoute', params: { itemKey: item.key, childKey: child.key }}">{{ child.name }}</a>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'LeftMenu',
  props: ['menuItems'],
  mounted() {
    // 这里假设你已为 'menuItemRoute' 和 'menuChildRoute' 设置了相应的路由定义
  },
}
</script>

<style>
/* CSS 样式省略 */
</style>

在这个例子中，`main.vue` 通过 `props` 接受 `menuItems` 数据，并在模板中渲染 `left-menu` 组件。`left-menu.vue` 则展示了二级菜单，通过 `v-for` 循环遍历 `menuItems`，生成链接并通过 `to` 指向对应的路由。