3、制作左右结构导航首页

目标

• 期待效果
• layout.vue布局页面开发
• 嵌套路由
• NavMenu 导航菜单
• 测试

期待效果

左侧导航，右侧显示导航到的url内容

image.png

第一步 Index.vue布局页面开发

后在Index.vue中运用Element UI Container 布局容器组件。

image.png

代码如下：

<template>
    <el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style>
     .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  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;
  }
</style>

目前效果

image.png

Container说明

Container，用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。 <el-aside>：侧边栏容器。 <el-main>：主要区域容器。

调整页面，高度自适应

<template>
    <div id="aaa" >
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside ></el-aside>
            <el-main>Main</el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
    </div>
</template>

<script>
</script>

<style>
    #aaa{
        margin: -60px 0 0 0;
        height: 100%;
    }
    .el-header,.el-footer{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        height: 100%;
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    .el-main {
        height: 100%;
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    html,body{
        height: 100%;
        
    }
    #app{
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
</style>

第二步 编写路由文件，注意嵌套路由

routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    /* {
        path: '/reg',
        name: 'Register',
        component: Register
    }, */
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/index',
        name: 'Index',
        component: Index,
        // 嵌套路由
        children: [{
            // 这里不设置值，是把main作为默认页面
            path: '/reg',
            name: 'Register',
            component: Register
        }]
    }
]
   ......

第三步 NavMenu 导航菜单 组件

新建菜单组件Menu.vue,
直接复制下图里面的代码到Menu.vue然后微调样式。

image.png

<el-main>标签之间增加如下代码，用于渲染路由到的url

<router-view />

Menu.vue完整代码：

<template>
    
         <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          active-text-color="#ffd04b"
          :default-active="$router.path"
          router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>基础信息维护</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
                    <el-menu-item index="reg">用户管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
</template>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style>
</style>

注意的地方：

image.png image.png

在index.vue中引用menu

<template>
    <div id="aaa" >
    <el-container>
        <el-header>欢迎:{{realName}}</el-header>
        <el-container>
            <el-aside >
               <!--菜单树-->
               <leftmenu></leftmenu>
            </el-aside>
            <el-main>
                <!--导航到的内容-->
                <router-view />
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
    </div>
</template>

<script>
  import leftmenu from '@/components/Menu'
  export default {
      data(){
          return{
              realName:'',
              useType:''
            }
      },
    components: {
        leftmenu
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    mounted:function(){
          let name=sessionStorage.getItem("userName");
          let type=sessionStorage.getItem("useType");
        this.realName=name;
        this.useType=type;
    }
  }
</script>

<style>
    #aaa{
        margin: -60px 0 0 0;
        height: 100%;
    }
    .el-header,.el-footer{
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
    .el-aside {
        height: 100%;
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    .el-main {
        height: 100%;
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }
    html,body{
        height: 100%;
        
    }
    #app{
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
</style>

效果图

image.png