vue(keep-alive)+element 模仿浏览器tab

大神github项目地址(https://github.com/PanJiaChen/vue-element-admin)

vue-element-admin demo

项目中使用大神方案，参考掘金大佬实现方案(https://juejin.im/post/5d9da25e51882576e440937f)

使用vue的vuex与keep-alive将页面信息缓存，实现页面切换时，数据被缓存省去重复加载的过程　中间会新增钩子　activated(激活时触发)，deactivated(失活时触发)

TooBar

使用element-UI库,el-tag实现标签显示与关闭功能
通过vuex信息加载路由信息　进行显示，通过关闭按钮清除vuex中的该路由信息

router

keepAlive用于决定是否被缓存
格式参照如下：

{
    name:'哈哈哈',
    path: '/data/serviceData',
    meta: { title: '服务数据',keepAlive:true },
    component: () => import('../views/xxx')
},
{
    name:'嘿嘿嘿',
    path: '/data/service',
    meta: { title: '服务哈哈',keepAlive:false },
    component: () => import('../views/xxx')
}

vuex

处理 app.vue与toobar组件传过来的数据

data:{
    toolBarData: [], // 保存toobar标签的数组
    cacheView: [], // 保存需要缓存的数组
},
actions: {
    commitToolBar ({ commit }, data) { //新增路由时，触发　用于新增ｔａｂ和缓存
        commit('setToolData', data)
        commit('setCacheView', data)
    },
    clearToolBar ({ commit }, data) {　//关闭指定标签
        commit('clearToolItem', data.detail)
    },
    clearCache ({ commit }, data) {　//清除指定路由　从而清缓存
        commit('clearCacheView', data)
    }
},
mutations:{
    setToolData (state, data) { 
        // 添加标签按钮，如果当前路由已经打开，则不再重复添加
        const inToolbar = state.toolBarData.find(item => item.detail === data.detail)
        /*
        此处可以对新增缓存的路由以及state.toolBarData进行处理
        */
        //如果当前路由未打开，则push  新增路由信息
        !inToolbar && state.toolBarData.push({
            ...data
        })
    },
    setCacheView (state, data) { // 与setToolData类似
        //如果有则不新增
        if (state.cacheView.includes(data.componentName)) return
        //else新增
        state.cacheView.push(data.componentName)
    },
    clearToolItem (state, detail) {　//
        //findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
        const index = state.toolBarData.findIndex(item => item.detail === detail) // 根据需关闭标签的路由path 获取其下标
        判断当前页面是否是需要关闭的页面
        const isActive = router.app.$route.path === state.toolBarData[index]['detail']
        const len = state.toolBarData.length - 1
        //从state.toolBarData删除该页面
        state.toolBarData.splice(index, 1);
        //如果删除页是最后一页 或者是当前显示页   自动跳转到删除后的最后一页 显示出来
        (index === len || isActive) && router.push({ path: state.toolBarData[state.toolBarData.length - 1]['detail'] })
    },
    clearCacheView (state, viewName) {
        //从state.cacheView删除路由信息
        const index = state.cacheView.findIndex(item => item === viewName)
        state.cacheView.splice(index, 1)
    },
},
getters:{
     getToolData (state) {
        return state.toolBarData
    },
    getCacheView (state) {
        return state.cacheView
    }
}

入口文件

在vue的入口文件 添加keep-alive 以及路由监听

咳咳 这些差不多就可以实现tab的功能了,样式什么的 :x 可以自己去编写啦
当然 如果页面复用的问题,并且路由信息相同,还想分出两个及以上的标签的话,可以在路由中添加区分的信息,比如判断params的不同,再去dispatch,就可以一个vue页面产生多个标签
效果↓

效果图

ps：注意name与组件内的name对应！！！！！！！切记

============================================

当出现一下报错时↓

router报错.png

请在路由文件下设置以下内容

// 原因 路由跳转的时候两次push的path地址相同
import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return routerPush.call(this, location).catch(error => error)
}