elementui 左侧或水平导航菜单栏与main区域联动

系列文章目录

一、elementui 导航菜单栏和Breadcrumb 面包屑关联

二、elementui 左侧导航菜单栏与main区域联动

三、elementui 中设置图片的高度并支持PC和手机自适应

四、elementui 实现一个固定位置的Pagination（分页）组件

---

前言

elementui vue2.0 点击导航栏不同的菜单列表,可以在右侧 (Main) 主体区域显示不同的组件页面

一、实现步骤

1.中设置属性router为true

<el-menu :router="true"></el-menu>

2.中设置路由 route=“/”

<el-menu-item route="/"></el-menu-item>

3.里设置路由出口

 <el-main>
      <!-- 路由出口，渲染与当前菜单项关联的组件 -->
       <router-view></router-view>
  </el-main>

4.在路由inde.js文件中设置要关联的页面

{
  path: '/',
  name: 'home',
  component: HomeView,
  children: [
    {path:  '/filmview',component:  ()=> import( '../views/FilmView.vue')}
  ]
},

二、完整代码

1.HomeView.vue

<template>
  <div>
    <el-container style="border: 1px solid #ccc">
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px" style="background-color: #545c64">
          <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  :router="true" >
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-video-camera-solid"></i>电影</template>
              <el-menu-item-group>
                <!-- <template slot="title">新片*热片</template>-->
                <el-menu-item index="1-1" route="/filmview"><el-badge value="hot" class="item">2024新片精品 </el-badge></el-menu-item>

                  <el-menu-item index="1-2" route="/"><el-badge value="hot" class="item">2024必看热片 </el-badge></el-menu-item>

                <el-menu-item index="1-3" route="/">经典大片</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-s-platform"></i>电视剧</template>
              <el-menu-item-group>
                <!-- <template slot="title">新片*热片</template>-->
                <el-menu-item index="2-1"><el-badge value="hot" class="item">2024最新上架</el-badge></el-menu-item>

                <el-menu-item index="2-2">2024必看喜剧</el-menu-item>
                <el-menu-item index="2-3">古装</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-camera-solid"></i>动漫</template>
              <el-menu-item-group>
                <el-menu-item index="3-1">内地</el-menu-item>
                <el-menu-item index="3-2">日本</el-menu-item>
                <el-menu-item index="3-3">欧美</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <!-- 路由出口，渲染与当前菜单项关联的组件 -->
            <router-view></router-view>
          </el-main>
          <el-footer style="height: 20px;color: #ff1b08;"><div style="font-size: 10px">底部</div></el-footer>
          <!--<el-footer style="height: 20px;color: #ff1b08;"><div style="font-size: 10px">
            【影视天堂】提示：该网站为个人网站，服务不稳定，喜欢的资源可以保存到自己网盘哦！</div>
          </el-footer>-->
        </el-container>

      </el-container>


      <!--<el-container>
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>-->

    </el-container>
  </div>
</template>

<style scoped>
  .el-aside {
    color: #48b7d1;
  }
  .el-main {
    background: #eaedf2;
    height: calc(100vh - 100px);
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .item {
    margin-top: 0px;
    margin-right: 40px;
  }
</style>

<script>
  export default {
    name: "HomeView",
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    },
   methods: {
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
       console.log(key, keyPath);
     }
   }
  };

</script>

2.路由inde.js

{
  path: '/',
  name: 'home',
  component: HomeView,
  children: [
    {path:  '/filmview',component:  ()=> import( '../views/FilmView.vue')}
  ]
},

实现效果

1.访问地址：http://101.43.20.112

2.实现联动效果

PS:最后将左侧菜单栏调整成水平关联展示

总结

上面是实现水平导航菜单栏与main区域联动后的个人视频分享网站最新效果，该网站支持PC和手机，各位大佬们感兴趣的记得收藏，视频资源不定期更新，让你在闲暇之余既能学技术也能看感兴趣的视频资源！