Vue.js 实现标签页切换的两种方案：vue-router 与状态管理

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 实现标签页切换的方法，希望能提供帮助。如有疑问请留言，小编会及时回复。感谢支持！