VUE的tab页面切换的四种方法

VUE 是一款流行的 JavaScript 前端框架，用于构建交互式用户界面。在 VUE 中，tab 页面切换是常见的功能，以下是 VUE 中实现 tab 切换的四种方法的完整攻略。

1. 标准的 VUE 动态组件方法

我们可以使用标准的 VUE 动态组件方法，在模板中设置一个变量，然后根据变量的值确定要显示的组件。这种方法需要我们在 VUE 组件中定义所有的 tab 页面组件。

首先，我们需要在父组件中定义一个变量来指定显示哪个子组件。然后，使用 VUE 的 component 标签来渲染子组件。

示例代码：

<template>
  <div class="tab-container">
    <div class="tab-header">
      <div class="tab-item" v-for="(tab, index) in tabs" :key="index" @click="selectedTab = index">{{ tab }}</div>
    </div>
    <div class="tab-body">
      <component :is="selectedTabComponent"></component>
    </div>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'

export default {
  name: 'TabContainer',
  data() {
    return {
      tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
      selectedTab: 0,
    }
  },
  computed: {
    selectedTabComponent() {
      switch (this.selectedTab) {
        case 0:
          return Tab1
        case 1:
          return Tab2
        case 2:
          return Tab3
        default:
          return Tab1
      }
    }
  },
}
</script>

这个例子中，有三个子组件 Tab1、Tab2、Tab3，在父组件中根据 selectedTab 变量来确定显示哪个组件。在 computed 中使用 switch 语句根据 selectedTab 的值返回相应的组件。

2. 使用 VUE-ROUTER 实现

另一种常见的实现 tab 页面切换的方法是使用 vue-router 。在这种方法中，每个 tab 页面对应一个路由，切换 tab 时改变路由就可以了。

首先，我们需要在路由器中定义子路由。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Main,
      children: [
        {
          path: 'tab1',
          component: Tab1
        },
        {
          path: 'tab2',
          component: Tab2
        },
        {
          path: 'tab3',
          component: Tab3
        }
      ]
    }
  ]
});

在父组件中，我们需要添加router-view标签以展示子路由内容，同时也需要添加页面导航菜单。

<div class="tab-container">
  <div class="tab-header">
    <router-link to="/tab1" class="tab-item">Tab 1</router-link>
    <router-link to="/tab2" class="tab-item">Tab 2</router-link>
    <router-link to="/tab3" class="tab-item">Tab 3</router-link>
  </div>
  <div class="tab-body">
    <router-view></router-view>
  </div>
</div>

以上代码中，每个 router-link 标签都会将用户导向到相应的子路由页面。子路由页面将通过 router-view 标签进行渲染。

3. 使用 ELEMENT-UI 的 Tabs 组件

如果你在你的 VUE 项目中使用了 ELEMENT-UI 的组件库，你也可以很方便的使用 Tabs 组件来实现 tab 页面切换。如下：

<template>
  <div class="tab-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="Tab 1" v-if="activeName === 'tab1'">
        <p>Tab 1 content</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 2" v-if="activeName === 'tab2'">
        <p>Tab 2 content</p>
      </el-tab-pane>
      <el-tab-pane label="Tab 3" v-if="activeName === 'tab3'">
        <p>Tab 3 content</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'tab1'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
};
</script>

在这个例子中，我们使用了 ELEMENT-UI 的 Tabs 组件简化了开发过程。依据 activeName 的值，渲染对应的子组件。

4. Bootstrap + Jquery 实现

Bootstrap 和 Jquery 是另外一种常见的前端技术组合，也可以实现 tab 页面切换功能。

在 HTML 代码中，添加对相应的 Bootstrap 和 Jquery库的调用：

<head>
  <title>Bootstrap tab example</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <h3>Tab 1</h3>
      <p>This is tab content</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <h3>Tab 2</h3>
      <p>This is tab content</p>
    </div>
    <div id="tab3" class="tab-pane fade">
      <h3>Tab 3</h3>
      <p>This is tab content</p>
    </div>
  </div> 
</body>

以上代码中，我们利用 Bootstrap 的 nav-tabs 和 tab-pane 样式类和 Jquery 的 data- 属性来指定要显示哪个 tab 子页面。

总结：以上四种方法中，vue-router 和标准的 VUE 动态组件方法最为使用广泛。 vue-router 适用于当子页面需要使用 router 功能时，标准的 VUE 动态组件方法适用于仅需切换子页面内容时。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：VUE的tab页面切换的四种方法 - Python技术站

VUE的tab页面切换的四种方法

1. 标准的 VUE 动态组件方法

2. 使用 VUE-ROUTER 实现

3. 使用 ELEMENT-UI 的 Tabs 组件

4. Bootstrap + Jquery 实现

相关文章