本文介绍在 Vue.js 中实现标签页切换的两种常见方式。针对数据量大、交互复杂的场景，推荐使用 vue-router 配合 keep-alive，利用其自动销毁组件的特性优化性能并支持过渡动画；对于轻量级场景，则可通过 vue.js 直接定义 active 状态并结合 computed 计算属性动态切换组件显示。
Vue.js 标签页切换效果概述
本节介绍第二个实例，即标签页切换效果，具体表现如下：
这是一种常见的交互形式。传统 JavaScript 做法是为按钮绑定事件以切换不同层；纯 CSS 方案也可行，例如将三个切换层分别作为单选按钮的兄弟节点，通过绝对定位将单选按钮覆盖在三个按钮上方，利用 :checked 伪类控制兄弟元素（即对应层）的显示。其 DOM 结构大致如下：
基于 vue-router 的高级切换方案
在 vue.js 中实现上述效果主要有两种途径。第一种是使用 vue-router。vue-router 作为 vue.js 的路由组件，在单页面应用中极为流行。若切换层数据量巨大，需与服务器进行大量数据交互，强烈建议使用 vue-router。因为 vue-router 在每次切换路由时会自动销毁（destroyed）前一个组件，从而避免频繁操作导致的页面卡顿，且 vue-router 还定义了页面切换过程中的过渡动画。
基于状态管理的轻量级切换方案
若数据量并不复杂，可直接通过 vue.js 定义切换状态来切换不同的层。
首先编写 template 和 css 代码：
其中 introduce、chatbar、videobar 分别代表三个需随 button 切换的组件。接下来，可为 vue.js 的 button 节点绑定事件以操控点击状态：
点击不同 button 会改变 active 状态，该状态同时作用于 button 本身，例如实现被点击按钮的高亮效果。
如何将 active 状态作用于弹出层？定义一个 computed 函数即可：
总结
以上介绍了 Vue.js 实现标签页切换的方法，希望能提供帮助。如有疑问请留言，小编会及时回复。感谢支持！