如何实现Vue Tab切换和页面缓存处理的多种方法？

本文共计1668个文字，预计阅读时间需要7分钟。

前言+信任tab切换，对于大家来说都不算陌生，后台管理系统中经常会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。+1. 如何切换+使用动态组件，相信大家。

前言

相信tab切换对于大家来说都不算陌生，后台管理系统中多会用到。如果不知道的话，可以看一下浏览器上方的标签页切换，大概效果就是这样。

1.如何切换

使用动态组件,相信大家都能看懂（部分代码省略）

//通过点击就可以实现两个组件来回切换 <button @click="changeView">切换view</button> <component :is="currentView"></component> import pageA from "@/views/pageA"; import pageB from "@/views/pageB"; computed: { currentView(){ return this.viewList[this.index]; } }, methods: { changeView() { this.index=(++this.index)%2 } }

注：这个多用于单页下的几个子模块使用，一般切换比较多使用下面的路由

使用路由（这个就是配置路由的问题了，不作赘述）2.动态生成tab

一般UI框架给我们的tab切换都像是上面的那种，需要自己写入几个tab页之类的配置。