Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域功能

一、准备工作

首先需要创建一个基于Vue3的项目，可以使用Vue CLI来创建，并安装Element-Plus插件。具体细节可以参考Vue CLI和Element-Plus的官方文档。

二、菜单组件的实现

菜单组件采用Element-Plus自带的菜单组件el-menu，需要在菜单组件中引入需要显示的组件，并在点击菜单时将组件插入到Main区域中。

实现的大体思路如下：

1.在菜单组件中定义菜单项和对应的组件路径。

2.在点击菜单时，通过路由跳转，将对应组件显示到Main区域。

具体实现代码如下：

<template>
  <el-menu router :default-active="$route.path" @select="handleSelect">
    <el-menu-item index="/home">Home</el-menu-item>
    <el-menu-item index="/about">About</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleSelect(index, indexPath) {
      this.$router.push(index);
    },
  },
};
</script>

在这个例子中，菜单项包括"Home"和"About"，对应的路由路径分别为"/home"和"/about"。

三、Main区域的实现

Main区域是组件的展示区域，需要根据当前路由的组件路径来动态渲染组件。

具体实现方法如下：

1.在Main区域中使用router-view标签，用于显示当前路由对应的组件。

2.在路由配置文件中定义路由对应的组件。

3.在App.vue文件中使用router-view标签，显示当前路由对应的组件。

具体实现代码如下：

<template>
  <div class="app-container">
    <Menu />
    <div class="main-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Menu from "./components/menu.vue";

export default {
  name: "App",
  components: {
    Menu,
  },
};
</script>

四、示例

以下是一个完整的示例代码，可以参考实现菜单组件和Main区域的功能。

<template>
  <div class="app-container">
    <Menu />
    <div class="main-container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Menu from "./components/menu.vue";
import Home from "./views/home.vue";
import About from "./views/about.vue";

export default {
  name: "App",
  components: {
    Menu,
  },
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/about",
      component: About,
    },
  ],
};
</script>

<style>
.app-container {
  display: flex;
  flex-direction: row;
}

.main-container {
  flex: 1;
  margin-left: 20px;
  margin-right: 20px;
}
</style>

菜单组件代码：

<template>
  <el-menu router :default-active="$route.path" @select="handleSelect">
    <el-menu-item index="/home">Home</el-menu-item>
    <el-menu-item index="/about">About</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleSelect(index, indexPath) {
      this.$router.push(index);
    },
  },
};
</script>

Home组件代码：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page.</p>
  </div>
</template>

About组件代码：

<template>
  <div>
    <h1>About</h1>
    <p>Welcome to the about page.</p>
  </div>
</template>

以上就是Vue3+Element-Plus 实现点击左侧菜单时显示不同内容组件展示在Main区域的完整攻略，可以根据自己的需求进行灵活使用和二次开发。