点击el-menu-item切换el-main页面显示怎么配置路由

在使用 `el-menu` 和 `el-menu-item` 组件的时候，可以通过 `router-link` 进行路由跳转。例如：

<template>
  <el-menu default-active="home" mode="horizontal" @select="handleMenuSelect">
    <el-menu-item index="home" route="/home">首页</el-menu-item>
    <el-menu-item index="about" route="/about">关于我们</el-menu-item>
    <el-menu-item index="contact" route="/contact">联系我们</el-menu-item>
  </el-menu>

  <el-main>
    <router-view></router-view>
  </el-main>
</template>

<script>
export default {
  methods: {
    handleMenuSelect(index) {
      // 手动触发路由跳转
      this.$router.push(index);
    }
  }
}
</script>

在 `el-menu-item` 组件中，通过设置 `route` 属性来指定跳转的路由路径。然后在 `handleMenuSelect` 方法中，通过 `$router.push` 方法手动触发路由跳转。

最后，在页面组件中，可以通过 `router-view` 组件来显示对应的路由组件。

<template>
  <div>
    <h1>首页内容</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

其他页面同理，只需要在路由文件中定义对应的路由即可。