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

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

简介

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

image.png

项目简介

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

全局状态管理使用pinia(附上文档:pinia.esm.dev/introductio…

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

ui使用element-plus

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

image.png 运行项目看看 image.png

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

组件设计

问题与方案

1. 什么时候记录路由,存放到哪里?

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

2. 切换标签时,是否可以缓存页面?

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

3. 关闭标签时,路由跳转到哪里?

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

组件开发

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

image.png

在layouts中引用:

image.png

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

image.png

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

image.png 我们开始编写对路由的增删功能:

增加路由

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

image.png

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

image.png

关闭路由

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

image.png

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

image.png

关闭其他路由

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

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

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

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

image.png 接着看看store里面的实现:

image.png

关闭全部路由

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

image.png

image.png

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

tabs组件

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

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

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

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

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

image.png

image.png

image.png

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

页面的缓存

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

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

image.png

使用keep-alive image.png

总结

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

附上源码:github.com/qaz61912862…

点个赞吧,求求了~~!

分类:
前端
收藏成功!
已添加到「」, 点击更改