iview侧边导航收起

看了网上很多资料，代码都不全，我找了一个靠谱的代码，然后自己改了一下，居然成功了！距离成功就一步之遥啊，没想到能自己东拼西凑的写出来！

想讲一下思路吧

开始以为iview不存在导航收起功能，但后来发现他是有的，只不多只支持一级菜单，含二级菜单的收起会很难看

iView / View Design 一套企业级 UI 组件库和前端解决方案

所以我还是尽量使用原装的收起功能，稍加改造使他支持二级菜单的收起，在网上我看到这个代码

iview可收缩侧边菜单实现（支持二级菜单）

但里面的代码不全，我又根据官网补充了一下最后可以了，直接上代码！

<template>
    <Layout>
        <Sider breakpoint="md" ref="side1" collapsible :collapsed-width="78" v-model="isCollapsed" :style="{'background':'#ffffff'}">
            <Menu :theme="theme" width="auto" :class="menuitemClasses">
                <template v-for="(item, componentIndex) in menu">
                    <!-- 展开并且有子菜单 -->
                    <Submenu v-if="!isCollapsed && item.children.length" v-bind:key="componentIndex"
                             :name="componentIndex">
                        <template slot="title">
                            <Icon :type="item.icon"/>
                            <span>{{ item.name }}</span>
                        </template>
                        <MenuItem v-for="(children, index) in item.children" :key="index" :name="children.to"
                                  :to="children.to">
                            {{ children.name }}
                        </MenuItem>
                    </Submenu>
                    <!-- 展开但没有子菜单 -->
                    <MenuItem v-else-if="!isCollapsed" :name="item.to" :to="item.to" v-bind:key="componentIndex">
                        <Icon :type="item.icon"/>
                        <span>{{ item.name }}</span>
                    </MenuItem>

                    <!-- 不展开有子菜单 -->
                    <Dropdown v-else-if="isCollapsed && item.children.length" v-bind:key="componentIndex"
                              placement="right-start" class="menu-dropdown">
                        <MenuItem :name="item.to" :to="item.to">
                            <Icon :type="item.icon"/>
                            <!--                            <span>{{ item.name }}</span>-->
                        </MenuItem>
                        <DropdownMenu slot="list">
                            <DropdownItem v-for="(children, index) in item.children" :key="index"
                                          style="padding: 0 0; background-color:#ffffff;">
                                <MenuItem :name="children.to" :to="children.to">{{ children.name }}</MenuItem>
                            </DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <!-- 不展开无子菜单 -->
                    <Tooltip v-else-if="isCollapsed" :content="item.name" placement="right" v-bind:key="componentIndex">
                        <MenuItem :name="item.to" :to="item.to">
                            <Icon :type="item.icon"/>
                            <!--                            <span>{{ item.name }}</span>-->
                        </MenuItem>
                    </Tooltip>

                </template>
            </Menu>
        </Sider>

        <Layout>
            <Content>
                <router-view></router-view>
            </Content>
        </Layout>
    </Layout>
</template>
<script>
    export default {
        data() {
            return {
                isCollapsed: false,
                menu: [

                    {
                        name: "系统管理",
                        to: "",
                        icon: "ios-create-outline",
                        children: [
                            {
                                name: "应用管理",
                                to: "/applicationManage/List"
                            },
                            {
                                name: "主机管理",
                                to: "/applicationManage/Other"
                            }

                        ]
                    },
                    {
                        name: "应用监控",
                        to: "",
                        icon: "ios-archive-outline",
                        children: [
                            {
                                name: "异常清单",
                                // to: "/applicationManage/Other1"
                            },
                            {
                                name: "告警记录",
                                // to: "/applicationManage/Other2"
                            }
                        ]
                    },
                    {
                        name: "构建部署",
                        // to: "/applicationManage/Other3",
                        icon: "md-apps",
                        children: []
                    },
                ]
            }
        },
    }

</script>
<style>

    .ivu-layout-sider-trigger {
        color: #525a6e;
        background: #ffffff;
    }

</style>