vue Tab切换以及缓存页面处理的几种方式

前言

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

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

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

<menu>
 <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
  <router-link :to="item.path">{{item.name}}</router-link>
 <menu-item>
</menu>

<template>
 <menu class="left"/>//menu代码部分如上
 <div class="right">
  <tab-list>
   <tab-item v-for="(item,index) in tabList" :key="index">
    <router-link :to="item.path">{{item.name}}</router-link>
    <icon class="delete" @click="deleteTab"></icon>
   </tab-item>
  </tab-list>
  <page-view>
   <router-view></router-view>//这里是页面展示
  </page-view>
 </div>
</template>

以上代码并非实际代码，只提供一个大概的思路。至于

addToTabList

和

deleteTab

怎么做就是数组方法的简单

push

和

splice								 
 1/3    1 2 3 下一页 尾页