vantabs多页渲染_vue Tab切换以及缓存页面处理的几种方式

前言

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

1.如何切换

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

//通过点击就可以实现两个组件来回切换

切换view

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页之类的配置。但是我们如果想要通过点击左边的目录来生成一个tab页并且可以随时关闭呢(如下图)？

只需要给路由一个点击事件，把你的路由地址保存到一个列表，渲染成另一个平铺的tab目录即可

假设你的布局是这样，左边的目录，上边的tab，有字的是页面