vue中如何实现tab切换功能？

最新推荐文章于 2025-06-13 11:04:32 发布

原创最新推荐文章于 2025-06-13 11:04:32 发布 · 4.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

vue 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Vue中的内容切换技术，包括v-show的简单版原理和数据渲染，以及组件切换的重点——vue中is特性和keep-alive缓存。在管理系统中，通过keep-alive的include属性结合动态维护的pages数组，实现标签页组件的缓存和管理，如新增、删除标签页时的组件状态保存与清除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、v-show控制内容切换
1）简单版原理：用点击事件改变num值作为开关，控制tab样式和内容显示隐藏。
在这里插入图片描述
2）数据渲染原理：主要利用v-for绑定的index来控制，跟上面差不多。

二、组件切换。
知识点主要是vue中is的特性，和keep-alive缓存。

三、路由切换。（对地址栏和数据请求友好）
通过router-link实现。

2、vue中keep-alive 实现标签页组件缓存
在做管理系统的时候，有时候需要实现类似浏览器标签页效果：
在这里插入图片描述
。打开新页面时插入新的标签页
。切换标签页时缓存组件状态
。关闭标签页时删除该组件的缓存，保证下一次打开时为初始状态。

用keep-alive来缓存组件状态，使用include保存活跃状态标签页组件的name属性

<keep-alive :include="pages"> 
	<router-view></router-view>
</keep-alive>
 123
  export default { 
  	data() { 
  		return { 
  			pages: [] 
  		}
  	},
  	methods: { 
  		//新增标签页 
  		addPage(name) { 
  			if(!this.pages.includes(name)) this.pages.push(name); 
  		},
  		//删除标签页 
  		removePage(name) { 
  		var index = this.indexOf(val); 
  		if (index > -1) { 
  			this.splice(index, 1);
  	  } 
  	}
  }
 }