vuex+elemnt-plus+vue-router 实现tabs栏存储已访问路由

1.思路

(1)使用vuex存储当前激活的路由activeTabsPath<Srting>以及存储已访问的路由showTabs<Arrar>,

(2)使用element-plus的tabs和menu组件配合vue-router来切换页面。

(3)el-menu组件中有一个default-active的属性表示默认激活菜单的 index,用它来绑定

:default-active="activeTabsPath",这里需要先把el-menu组件的router属性设置为true(表示以index为路径进行跳转),el-menu-item的index属性绑定为路由路径(如:index="/home")

         el-tabs组件中用v-model属性绑定激活的标签,用它来绑定v-model="activeTabsPath"。

          组件中绑定的activeTabsPath为组件的计算属性,从vuex中接的activeTabsPath数据。

(4)给el-menu-item和el-tab-pane添加点击事件,el-menu-item点击后以绑定的index更新vuex中的activeTabsPath,同时push一个对象(包含el-menu-item的name和index)到vuex的showTabs中(需判断是否与showTabs中的重复)。el-tab-pane点击后用router.push跳转,同时更新vuex中的activeTabsPath。

(5)tabs栏中的标签用vuex的showTabs来循环渲染,到此可实现点击菜单栏跳转页面,同时在tabs栏中新增一个标签,点击标签跳转到已访问的页面,激活标签与激活菜单对应。

(6)在el-tab-pane中有个tab-remove删除标签事件,删除标签后,需同时删除vuex的showTabs中对应的对象。这里还可以多两个情况,删除激活标签和标签数量限制以及最后一个标签,分别对应的是跳转最后一个标签,超出后删除前排标签,以及不允许删除或跳转首页。

(7)为实现刷新后也能保存tabs栏,需在更新vuex数据的同时上传到sessionStorage中,在刷新页面时去sessionStorage中获取activeTabsPath以及showTabs,上传对象需用JSON.parse()处理下载以及JSON.stringif()处理上传。

(8)已访问页面数据的缓存尚未实现,再探索中。

        

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容