vue3.x + ts + vue-router + pinia简易多页签方案

简介

由于业务需要，本人需要在项目中增加多页签的功能（效果如下图），效果为记录打开过的路由并可以对路由进行关闭等操作。本文主要记录开发组件的过程和思路，记得先点赞在看噢！

项目简介

项目主要由vue-cli搭建，vue3.x + typescript + vue-router

全局状态管理使用pinia（附上文档：pinia.esm.dev/introductio… ）

ps：为什么不用vuex进行状态管理？ 答：使用pinia是由于vuex对typescript的支持不太友好，使用的字符串发送action，会出现类型推断丢失

ui使用element-plus

下面来看看项目初始架构：

运行项目看看

在了解了项目的基本结构和运行效果后，下面我们开始开发多页签组件~

组件设计

问题与方案

1. 什么时候记录路由，存放到哪里？

答：路由改变时记录路由，存放在pinia中，考虑到刷新页面也要保持路由的存放，同时存放一份在sessionStorage中。

2. 切换标签时，是否可以缓存页面？

答：在路由配置中自定义增加isCache配置，使用< keep-alive >缓存页面。

3. 关闭标签时，路由跳转到哪里？

答：若关闭的不是当前标签，则直接关闭，不跳转；若关闭的是当前标签，关闭然后跳转至最后一个标签的路由下。

组件开发

首先我们创建tabs组件和tabs的状态管理：

在layouts中引用：

接下来我们来设计tabs的状态管理： 考虑到首页默认打开的，所以必须一直存在，创建一个常量，然后使用sessionStorage记录路由；如果是访问不存在的路由跳转到404页面，并且不记录404页面

在右击页签的时候（后文实现），我们可以进行关闭路由，关闭其他路由和关闭全部路由的操作，下面我们来一一实现👇

我们开始编写对路由的增删功能：

增加路由

思路很简单，当路由存在，向tabs数组中push一个路由作为一个标签页

那触发该方法的时机是什么呢？当然就是路由发生变化且不存在于tabs数组中时，我们在tabs组件中监听路由：

关闭路由

在知道了新增路由的处理后，关闭路由就变得很简单了：

这里需要注意的是，如果关闭的是当前页签的路由，我们需要跳转到tabs数组的最后一个路由： 在tabs组件中，当点击标签页右侧关闭按钮时触发上面的方法：

关闭其他路由

关闭其他路由则需要判断是右击的页签是否为当前的路由

如果是当前的路由，页面无需跳转，仅保存首页以及当前路由；

如果不是当前的路由，则需要跳转至右击页签的路由，并且保存首页以及右击页签的路由：

通过记录右击页签的下标来获取当前右击的路由：

接着看看store里面的实现：

关闭全部路由

这个简单，直接跳转到首页并设置tabs数组为首页路由即可：

到这里，我们对关于路由的操作就开发完成了，接下来我们还差tabs组件的布局以及右击页签的效果👇

tabs组件

这里我讲一下大概的思路，具体细节的实现可以查看文末的源码😊

1. 首先tabs组件需要对tabs数组遍历渲染出多个页签，此处我们使用element-plus的scrollbar组件实现；

2. 右击页签我们在页签绑定contextmenu事件，菜单使用fixed布局，通过右击获取当前鼠标所在的left和top进行定位

3. 通过contentVisible控制菜单显隐，当contentVisible为true时，给window绑定一个click事件，触发时将contentVisible设为false，隐藏菜单

4. 对于scrollbar滚轮滑动页签的小优化

ps：样式的话可在文末源码链接下载后查看

页面的缓存

最后，我们来完成关于切换标签对页面的缓存功能：

通过在router.ts中设置isCache属性来控制页面是否被缓存

使用keep-alive

总结

至此，我们简单的完成了vue单页面的多页签方案，当然，这只是大概的实现，当中肯定有许多的不足，还可以继续优化达到更好的效果！

附上源码：github.com/qaz61912862…

点个赞吧，求求了~~！