简介
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/1-1669214897.jpeg "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/05/post-loading.gif "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
由于业务需要，本人需要在项目中增加多页签的功能（效果如下图），效果为记录打开过的路由并可以对路由进行关闭等操作。本文主要记录开发组件的过程和思路，记得先点赞在看噢！
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/2-1669214897.png "[vue3]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
下面来看看项目初始架构：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/10-1669214898.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
运行项目看看
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/6-1669214898.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
在了解了项目的基本结构和运行效果后，下面我们开始开发多页签组件~
组件设计
问题与方案
1. 什么时候记录路由，存放到哪里？
答：路由改变时记录路由，存放在pinia中，考虑到刷新页面也要保持路由的存放，同时存放一份在sessionStorage中。
2. 切换标签时，是否可以缓存页面？
答：在路由配置中自定义增加isCache配置，使用< keep-alive >缓存页面。
3. 关闭标签时，路由跳转到哪里？
答：若关闭的不是当前标签，则直接关闭，不跳转；若关闭的是当前标签，关闭然后跳转至最后一个标签的路由下。
组件开发
首先我们创建tabs组件和tabs的状态管理：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/5-1669214899.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
在layouts中引用：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/2-1669214899.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
接下来我们来设计tabs的状态管理：考虑到首页默认打开的，所以必须一直存在，创建一个常量，然后使用sessionStorage记录路由；如果是访问不存在的路由跳转到404页面，并且不记录404页面
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/9-1669214899.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
在右击页签的时候（后文实现），我们可以进行关闭路由，关闭其他路由和关闭全部路由的操作，下面我们来一一实现👇
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/8-1669214900.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
我们开始编写对路由的增删功能：
增加路由
思路很简单，当路由存在，向tabs数组中push一个路由作为一个标签页
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/3-1669214900.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
那触发该方法的时机是什么呢？当然就是路由发生变化且不存在于tabs数组中时，我们在tabs组件中监听路由：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/0-1669214901.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
关闭路由
在知道了新增路由的处理后，关闭路由就变得很简单了：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/7-1669214901.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
这里需要注意的是，如果关闭的是当前页签的路由，我们需要跳转到tabs数组的最后一个路由：在tabs组件中，当点击标签页右侧关闭按钮时触发上面的方法：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/5-1669214901.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
关闭其他路由
关闭其他路由则需要判断是右击的页签是否为当前的路由
如果是当前的路由，页面无需跳转，仅保存首页以及当前路由；
如果不是当前的路由，则需要跳转至右击页签的路由，并且保存首页以及右击页签的路由：
通过记录右击页签的下标来获取当前右击的路由：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/6-1669214902.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
接着看看store里面的实现：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/7-1669214902.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
关闭全部路由
这个简单，直接跳转到首页并设置tabs数组为首页路由即可：
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/6-1669214903.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/3-1669214903.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
到这里，我们对关于路由的操作就开发完成了，接下来我们还差tabs组件的布局以及右击页签的效果👇
tabs组件
这里我讲一下大概的思路，具体细节的实现可以查看文末的源码😊
-
首先tabs组件需要对tabs数组遍历渲染出多个页签，此处我们使用element-plus的scrollbar组件实现； -
右击页签我们在页签绑定contextmenu事件，菜单使用fixed布局，通过右击获取当前鼠标所在的left和top进行定位 -
通过contentVisible控制菜单显隐，当contentVisible为true时，给window绑定一个click事件，触发时将contentVisible设为false，隐藏菜单 -
对于scrollbar滚轮滑动页签的小优化
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/10-1669214903.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/0-1669214904.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/1-1669214905.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
ps：样式的话可在文末源码链接下载后查看
页面的缓存
最后，我们来完成关于切换标签对页面的缓存功能：
通过在router.ts中设置isCache属性来控制页面是否被缓存
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/9-1669214905.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
使用keep-alive
![[vue3]vue3.x + ts + vue-router + pinia简易多页签方案](https://www.bmabk.com/wp-content/uploads/2022/11/9-1669214906.png "[vue3]vue3.x + ts + vue-router + pinia简易多页签方案")
总结
至此，我们简单的完成了vue单页面的多页签方案，当然，这只是大概的实现，当中肯定有许多的不足，还可以继续优化达到更好的效果！
附上源码：github.com/qaz61912862…
https://github.com/qaz61912862/multi-tabs-demo
原文始发于微信公众号（豆子前端）：[vue3]vue3.x + ts + vue-router + pinia简易多页签方案
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/56563.html
