Vue学习记录09--侧边栏

因为所有的界面都要用到，所以可以用components文件夹放公共组件

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
        <el-submenu index="1">
            <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">导航一</span>
        </template>
<el-menu-item-group>
    <span slot="title">分组一</span>
    <el-menu-item index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
    <el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
    <span slot="title">选项4</span>
    <el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</template>

<style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
</style>

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

在home页面对当前页面进行引入、 在vue中引入。

按需引入

运行项目

在data中定义数据menu

menu:[
                    {
                        path:'/',
                        name:'home',
                        label:'首页',
                        icon:'s-home',
                        url:'Home/home'
                    },
                    {
                        path:'/mall',
                        name:'mall',
                        label:'商品管理',
                        icon:'video-play',
                        url:'MallManage/MallManage'
                    },
                   {
                        path:'/user',
                        name:'user',
                        label:'用户管理',
                        icon:'user',
                        url:'UserManage/UserManage'
                    },
                    {
                        label:'其他',
                        icon:'location',
                        children:[
                            {
                                path:'/page1',
                                name:'page1',
                                label:'页面1',
                                icon:'setting',
                                url:'Other/PageOne'
                            },
                            {
                                path:'/page2',
                                name:'page2',
                                label:'页面2',
                                icon:'setting',
                                url:'Other/PageTwo'
                            }
                        ]
                    }
                ]

计算属性：

!取反，返回有children节点的列表和没有节点的列表

渲染数据：

• 没有子项目的菜单：（一级菜单的展示）

• 有子项目的菜单：（二级菜单的展示）
  
  

侧边栏样式布局

• 标题颜色
  
• 背景颜色
• 高亮显示
  
  
  贴边：
  
  

点击左侧menu进行路由跳转

添加点击事件



对首页的Home进行重命名

修改路由：

所有页面都可以继承Main页面下的顶栏、侧边栏

前面说可以通过name跳转，因为在路由里配置了name属性：

修改目录结构：

跳转失败时看一下那几个文件对应的name，要和data里的一样！