Vue学习记录09--侧边栏

原创已于 2022-04-17 15:49:55 修改 · 2.7k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-04-13 10:59:27 首次发布

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在Vue项目中如何进行组件化开发，通过components文件夹存放公共组件，并展示了菜单组件的模板和样式。同时，讨论了如何在Home页面引入这些组件，以及在data中定义和渲染menu数据。文章还提到了按需引入和路由跳转的实现，强调了路由名与data中定义的name属性匹配的重要性，确保路由跳转的正确性。

因为所有的界面都要用到，所以可以用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'
                            }
                        ]
                    }
                ]