vue中实现后台管理路由标签页

<template>
    <section>
        <div class="navTabList el-tabs__nav-scroll" id="tabsNav" v-if="showTags">
            <ul class="nt-ul el-tabs__nav" id="tabsNavList">
                <li v-for="(item,index) in tagsList" :class="{'is-active': isActive(item.path)}" :key="index">
                    <router-link :to="item.path" class="tags-li-title">
                        {{item.title}}
                    </router-link>
                    <i class="el-tag__close el-icon-close" @click="closeTags(index)"></i></li>
            </ul>
            <div class="pull-right navTab_right">
                <el-button-group>
                    <el-button size="mini" icon="el-icon-arrow-left" @click="tabsPrev()"></el-button>
                    <el-button size="mini" icon="el-icon-arrow-right" @click="tabsNext()"></el-button>
                </el-button-group>
                <el-dropdown @command="handleTags">
                    <el-button size="mini" type="primary">
                        标签选项
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="other">关闭其他页面</el-dropdown-item>
                        <el-dropdown-item command="all">关闭所有页面</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </section>
</template>

<script>
    import bus from './bus'

    export default {
        data() {
            return {
                tagsList: [],
                counter: '0'
            }
        },
        methods: {
            tabsNext() {
                let tabNav = document.getElementById('tabsNav')
                let tabNavList = document.getElementById('tabsNavList')
                let tabNavW = tabNav.clientWidth
                let tabNavListW = tabNavList.clientWidth
                if (tabNavW < tabNavListW && this.counter + tabNavW - 210 < tabNavListW) {
                    this.counter = parseInt(this.counter) + parseInt(tabNavW) - 210
                    tabNavList.style.transform = 'translateX(' + '-' + this.counter + 'px)'
                } else {
                }
            },
            tabsPrev() {
                let tabNav = document.getElementById('tabsNav')
                let tabNavList = document.getElementById('tabsNavList')
                let tabNavW = tabNav.clientWidth

                if (tabNavW <= this.counter + tabNavW - 210) {
                    this.counter = parseInt(this.counter) - parseInt(tabNavW) + 210
                    tabNavList.style.transform = 'translateX(' + '-' + this.counter + 'px)'
                } else if (this.counter !== 0) {
                    this.counter = 0
                    tabNavList.style.transform = 'translateX(' + '0' + 'px)'
                } else {
                }
            },
            isActive(path) {
                return path === this.$route.fullPath
            },
            // 关闭单个标签
            closeTags(index) {
                const delItem = this.tagsList.splice(index, 1)[0]
                const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]
                if (item) {
                    delItem.path === this.$route.fullPath && this.$router.push(item.path)
                } else {
                    this.$router.push('/dashboard')
                }
            },
            // 关闭全部标签
            closeAll() {
                this.tagsList = []
                this.$router.push('/dashboard')
            },
            // 关闭其他标签
            closeOther() {
                const curItem = this.tagsList.filter(item => {
                    return item.path === this.$route.fullPath
                })
                this.tagsList = curItem
            },
            // 设置标签
            setTags(route) {
                const isExist = this.tagsList.some(item => {
                    return item.path === route.fullPath
                })
                if (!isExist) {
                    if (this.tagsList.length >= 99) {
                        this.tagsList.shift()
                    }
                    this.tagsList.unshift({
                        title: route.meta.title,
                        path: route.fullPath,
                        name: route.matched[1].components.default.name
                    })
                }
                // bus.$emit('tags', this.tagsList)
            },
            handleTags(command) {
                command === 'other' ? this.closeOther() : this.closeAll()
            }
        },
        computed: {
            showTags() {
                return this.tagsList.length > 0
            }
        },
        watch: {
            $route(newValue, oldValue) {
                this.setTags(newValue)
            }
        },
        created() {
            this.setTags(this.$route)
            // 监听关闭当前页面的标签页
            bus.$on('close_current_tags', () => {
                for (let i = 0, len = this.tagsList.length; i < len; i++) {
                    const item = this.tagsList[i]
                    if (item.path === this.$route.fullPath) {
                        if (i < len - 1) {
                            this.$router.push(this.tagsList[i + 1].path)
                        } else if (i > 0) {
                            this.$router.push(this.tagsList[i - 1].path)
                        } else {
                            this.$router.push('/dashboard')
                        }
                        this.tagsList.splice(i, 1)
                    }
                }
            })
        }
    }
</script>

<style scoped>
    .navTabList {
        padding-right: 210px;
        height: 34px;
        line-height: 34px;
        background: #f4f4f4;
        margin-bottom: 10px;
        font-size: 12px;
        background-color: white;
        box-shadow:0 5px 10px #ddd ;
    }

    .navTabList .nt-ul {
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navTabList .nt-ul li {
        display: inline-block;
        margin: 1px 5px 2px 1px;
        border-radius: 3px;
        font-size: 12px;
        overflow: hidden;
        cursor: pointer;
        height: 24px;
        line-height: 24px;
        border: 1px solid #e9eaec;
        background: #fff;
        padding: 2px 12px 0 12px;
        vertical-align: middle;
        color: #666;
        -webkit-transition: all 0.3s ease-in;
        -moz-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }

    .navTabList .nt-ul li:before {
        content: '';
        width: 1px;
        height: 23px;
        position: absolute;
        left: 0;
        top: 7px;
        border-right: 1px solid #e4e4e4;
    }

    .navTabList .nt-ul li:first-child:before {
        display: none;
    }

    .navTabList .nt-ul li i {
        position: relative;
        font-size: 12px;
        width: 0;
        height: 14px;
        vertical-align: middle;
        line-height: 15px;
        overflow: hidden;
        top: -1px;
        right: -10px;
    }

    .navTabList .nt-ul li  i {
        width: 14px;
    }

    .navTabList .nt-ul li a {
        display: inline-block;
        color: #999;
    }

    .navTabList .nt-ul .is-active {
        padding: 0 13px;
        /*margin-top: 2px;*/
        height: 30px;
        line-height: 30px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        background: #409eff;
        font-weight: bold;
        color: white;
    }
    .navTabList .nt-ul .is-active a{
        color: white;
    }

    .navTabList .nt-ul .is-active:before {
        display: none;
    }

    .navTabList .nt-ul .is-active + li:before {
        display: none;
    }

    .navTabList .nt-ul .is-active i {
        width: 14px;
    }

    .navTabList .navTab_right {
        position: absolute;
        height: 28px;
        right: 0;
        line-height: normal;
        padding: 3px 6px;
        background: white;
        box-shadow:0 5px 10px #ddd ;
        z-index: 2;
    }

    .navTabList .navTab_right .el-button-group {
        vertical-align: top;
    }

    .navTabList .el-button--mini {
        font-size: 12px;
        /*padding: 4px 6px;*/

    }
</style>

先上代码 可能一脸懵逼 ，接下来我说说我大概的思路：

首先基于element-ui框架el-tabs 组建

然后用watch  来监听路由

当监听到路由变化时和数组中路由列表比较如果有就不做处理，没有的话就新增路由到数组

删除的话就是从路由列表中删除该项

然后样式的话我做了ui上的调整