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

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

主要介绍了vue Tab切换以及缓存页面处理的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者

工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

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

大概效果就是这样。

1.如何切换如何切换

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

currentView(){

return this.viewList[this.index];

}

},

methods: {

changeView() {

this.index=(++this.index)%2

}

}

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

<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>

</div>

</template>

以上代码并非实际代码，只提供一个大概的思路。至于addToTabList和deleteTab怎么做就是数组方法的简

单push和splice操作了。为了效果好看，我们可能还需要一些tab的active样式，这里不作演示。

3.缓存组件缓存组件

仅仅是做tab切换，远远是不够的，毕竟大家想要tab页就是要来回切换操作，我们需要保存他在不同tab里操作的进度，比如

说填写的表单信息，或者已经查询好的数据列表等。

那么我们要怎么缓存组件呢？

只需要用到vue中的keep-alive组件