vue+element plus 点击左侧菜单，右侧内容根据路由切换

菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的，但是菜单没有的组件打不开了，所以改为根据路由打开内容，主要就是改为router-view借鉴学习了这位大大的思路指路链接自己成功之后记录下路由 router.jsconst routes = [{path: '/',name: 'home',component: () => import("../views/Home.vue"

小问号_

4977人浏览 · 2022-01-19 10:53:31

小问号_ · 2022-01-19 10:53:31 发布

菜单切换之前都是用菜单el-menu和el-tabs标签页拼接的，但是菜单没有的组件打不开了，所以改为根据路由打开内容，主要就是改为router-view
借鉴学习了这位大大的思路指路链接
自己成功之后记录下

路由 router.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import("../views/Home.vue"),这里是核心： center作为容器组件，包含左右菜单和右侧的router-view，所以下面的子组件实际是显示在router-view
    redirect: { name: "one" },   //输入路由center会重定向到one页面
    children: [
      {
        path: "one",
        name: "one",
        component: () => import("../views/one.vue"),//根据你的菜单结构引入
      },
      {
        path: "two",
        name: "two",
        component: () => import("../views/two.vue"),
      },
    ],
  },
]

菜单 home.vue

<template>
  <el-container class="container-wrapper">
    <el-container>
      <el-aside width="200px">
        <el-menu
          unique-opened
          :default-active="activeTabName"
          active-text-color="#ffd04b"
          background-color="#303133"
          class="el-menu-vertical-demo"
          text-color="#fff"
          @select="changeTab"
        >
          <el-sub-menu
            v-for="(item, index) in menusList"
            :key="index"
            :index="index + ''"
          >
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item
              v-for="(child, chi) in item.children"
              :index="child.name"
              :key="chi"
            >
              <span>{{ child.label }}</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
      	<!-- 这里是重点！！！ -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script type="text/ecmascript-6">
import { Comment, Histogram, WalletFilled } from "@element-plus/icons-vue";

export default {
  name: "home",
  components: {
    Comment,
    Histogram,
    WalletFilled,
  },
  data() {
    return {
      activeTabName: "", // 当前显示的选项卡 激活的 name
      menusList: [
        {
          icon: "WalletFilled",
          label: "demo",
          children: [
            {
              name: "one",
              label: "one",
            },
            {
              name: "two",
              label: "two",
            },
          ],
        },
      ]
    };
  },
  mounted() {
    this.activeTabName = this.$route.name;
  },
  methods: {
    // select	菜单激活回调	index: 选中菜单项的 index
    changeTab(name) {
      this.activeTabName = name;
      this.$router.push({
        name: name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container-wrapper {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.el-main {
  height: 100%;
  width: 100%;
  padding: 30px;
  margin: 0;
}
.el-aside {
  height: 100%;
  background-color: #303133;
}
.el-menu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.el-submenu {
  width: 200px;
}
</style>