导航栏两个功能（页面最大化，局部刷新）

<template>
    <div id="app">
        <header>
            <div class="header" v-show="$route.meta.show">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1"><a> <i class="el-icon-rank" @click='toggleFullScreen'></i></a></el-menu-item>
                    <el-menu-item index="2"><a> <i class="el-icon-refresh" @click='shuaxin'></i></a></el-menu-item>
                    <el-submenu index="3" style='float: right;'>
                        <template slot="title">系统操作</template>
                        <el-menu-item index="3-1" @click="zhuxiao">注销退出</el-menu-item>
                        <el-menu-item index="3-2" @click="zhuxiao">更换账号</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
        </header>
        <aside id="side" v-show="$route.meta.show">
            <div id="nav" @click="handleClick">
                <!-- <router-link to="/yi">壹壹壹壹壹</router-link>
                <router-link to="/er">贰贰贰贰贰</router-link>
                <router-link to="/san">叁叁叁叁叁</router-link>
                <router-link to="/aaa">肆肆肆肆肆</router-link>
                <router-link to="/wu">伍伍伍伍伍</router-link>
                <router-link to="/liu">陆陆陆陆陆</router-link>
                <router-link to="/qi">嘁嘁嘁嘁嘁</router-link>
                <router-link to="/ba">叭叭叭叭叭</router-link>
                <router-link to="/jiu">啾啾啾啾啾</router-link>-->
                <!-- <router-link to="/aaa">递归</router-link> -->
                <router-link to="/bbb" tag="a">日志查看</router-link>
                <router-link to="/ccc" tag="a">用户管理</router-link>
            </div>
        </aside>
        <main>
            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit" @tab-click="routeAdd">
                <!-- <el-tab-pane :disabled="tabDisabled" :key="item.name" v-for="(item, index) in editableTabs" :label="item.title"
                 :name="item.name">
                </el-tab-pane> -->
                <el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title"  :name="item.name"></el-tab-pane>
   
            </el-tabs>
            <router-view v-if="isRouterAlive" />

        </main>

    </div>
</template>


<style lang="scss" scoped>
    ::-webkit-scrollbar {
        border: none;
    }

    * {
        padding: 0;
        margin: 0;
    }

    header {
        width: 100%;
        height: 60px;
    }

    aside {
        position: absolute;
        height: calc(100% - 75px);
        width: 200px;

        #nav {
            background: rgb(84, 92, 100);
            height: 100%;
            border-top: 1px solid #FFF;
            display: flex;
            width: 100%;
            text-align: center;
            // box-shadow: inset 0 0 200px rgba(0, 0, 0, .4);
            flex-direction: column;
            text-align: center;

            a {
                line-height: 50px;
                font-weight: bold;
                color: rgb(191, 203, 217);

                &.router-link-exact-active {
                    color: #42b983;
                    background: rgb(5, 14, 48);
                }
            }
        }
    }

    main {
        position: absolute;
        left: 208px;
        height: calc(100% - 75px);
        overflow: auto;
        width: calc(100% - 216px);
    }
</style>


<script>
    import {
        removeToken
    } from '@/utils/auth'

    export default {
        data() {
            return {
                activeIndex2: '1',
                isRouterAlive: true,
                editableTabsValue: 'name2',
                tabIndex: 1,
                editableTabs: [{title:"日志查看",name:"/bbb"}],
                tabDisabled: true
            }
        },
        watch: {
            editableTabs() {
                if (this.editableTabs.length < 2) {
                    this.tabDisabled = true
                } else {
                    this.tabDisabled = false
                }
            },
        },
        methods: {
            handleClick(e) {
                if (e.target.nodeName.toLowerCase() === 'a') {
                    
                        this.editableTabs.map((res) => {
                            console.log(res.title)
                            // console.log(e.target.text.indexOf(res.title) > -1)
                            // console.log(e.target.text)
                            if (e.target.text.indexOf(res.title) > -1) {
                                console.log(123)
                            }else{
                                let newTabName = ++this.tabIndex + '';
                                let path = location.pathname
                                var arr = {
                                    title: e.target.text,
                                    name: path,
                                    // content: path
                                }
                                this.editableTabs.push(arr)
                            }
                        })    
                    // if(tit==e.target.text){
                    //     let path = location.pathname
                    //     this.$router.push("`${path}`")
                    // }else{
                    //     
                    //     
                    // }
                }
            },
            zhuxiao() {
                removeToken()
                this.$router.push({
                    name: 'login'
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            shuaxin() {//局部刷新
                this.isRouterAlive = false
                this.$nextTick(function() {
                    this.isRouterAlive = true
                })
            },
            handleTabsEdit(targetName, action) {
                // if (action === 'add') {
                //     let newTabName = ++this.tabIndex + '';
                //     this.editableTabs.push({
                //         title: 'New Tab',
                //         name: newTabName,
                //         content: 'New Tab content'
                //     });
                //     this.editableTabsValue = newTabName;
                // }
                if (action === 'remove') {
                    console.log(targetName)
                    this.editableTabs.splice(index,1)
                    let tabs = this.editableTabs;
                    let activeName = this.editableTabsValue;
                    if (activeName === targetName) {
                        tabs.forEach((tab, index) => {
                            if (tab.name === targetName) {
                                let nextTab = tabs[index + 1] || tabs[index - 1];
                                if (nextTab) {
                                    activeName = nextTab.name;
                                }
                            }
                        });
                    }

                    this.editableTabsValue = activeName;
                    this.editableTabs = tabs.filter(tab => tab.name !== targetName);
                }
            },
            routeAdd(tab, event) {
                // console.log(tab)
                
                var rou = tab.name
                console.log(rou)
                this.$router.push("`${rou}`")

            },
            toggleFullScreen() {//页面最大化
                if (!document.fullscreenElement && // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    if (document.cancelFullScreen) {
                        document.cancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                }
            },
        },
    }
</script>