How to implement tab components and multi-tab pages in Vue?

With the continuous updating of front-end technology, Vue, as a popular front-end framework, has become the first choice of many developers. In actual projects, it is often necessary to use tab components and multi-tab pages to switch and manage different functional modules. In this article, we will introduce how to use Vue to implement a simple tab component and multi-tab page.

1. Implement a simple tab component

1. Create a Tab.vue component

Create a Tab.vue component in the project for Displays the tab list and the contents of the currently selected tab page.

<template>
  <div>
    <div class="tab-header">
      <div class="tab-item" 
           v-for="(tab, index) in tabs" 
           :key="index"
           :class="{ active: index === currentIndex }" 
           @click="handleTab(index)">
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleTab(index) {
      this.$emit('tabchange', index);
    },
  },
};
</script>

In this component, we use the v-for directive to iterate through the incoming tabs array and render the title of each tab as a tab-item. The currentIndex of the selected tab page will add active class to tab-item to highlight the currently selected tab page. The tab component has its own slot slot, which is used to display the content of the tab page.

2. Use the Tab component in the parent component

On the page where the tab component needs to be used, import the Tab component and use it in the template to display the tab The page is passed into the Tab component as a member of the tabs array, and the index of the currently selected tab page is specified through the currentIndex property. In addition, listen to the tabchange event in the Tab component to change the value of currentIndex in the parent component to control the currently selected tab page.

<template>
  <div>
    <Tab :tabs="tabs" :currentIndex="currentIndex" @tabchange="handleChange">
      <div v-for="(tab, index) in tabs" :key="index">
        {{ tab.content }}
      </div>
    </Tab>
  </div>
</template>

<script>
import Tab from './Tab.vue';

export default {
  name: 'App',
  components: {
    Tab,
  },
  data() {
    return {
      currentIndex: 0,
      tabs: [
        {
          title: 'tab1',
          content: '这是第一个 tab 页的内容',
        },
        {
          title: 'tab2',
          content: '这是第二个 tab 页的内容',
        },
      ],
    };
  },
  methods: {
    handleChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>

In this parent component, we first need to import the Tab component, and then create the tabs array to store the title and content of each tab page. Two properties, tabs and currentIndex, need to be passed in the template to initialize the Tab component respectively. In the handleChange method, we listen to the tabchange event, so that the value of currentIndex can be updated in the parent component to select different tab pages.

2. Implement multi-tab component

1. Create page layout and routing configuration

Create a page with multi-tab function in the project. First you need to consider the layout of the page. In this article, we use the Layout component of Element UI to build the page infrastructure, and then complete the routing configuration through Vue Router. In a multi-tab scenario, each tab page can be regarded as a routing page, so corresponding routing information needs to be added to the routing table.

<template>
  <div class="page-container">
    <el-container>
      <el-header>
        <h1>{{ pageTitle }}</h1>
      </el-header>
      <el-container>
        <el-aside style="width: 200px; height: 100%">
          <el-menu
            :default-active="activeMenu"
            @select="handleSelect"
            unique-opened
            :collapse="isCollapse">
            <el-submenu v-for="menuGroup in menuList" :key="menuGroup.name" :index="menuGroup.name">
              <template slot="title">
                <i :class="menuGroup.icon"></i>
                <span>{{ menuGroup.title }}</span>
              </template>
              <el-menu-item v-for="menuItem in menuGroup.children" :key="menuItem.path" :index="menuItem.path">
                <i :class="menuItem.icon"></i>
                <span slot="title">{{ menuItem.title }}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'PageLayout',
  data() {
    return {
      pageTitle: '多标签页示例',
      menuList: [
        {
          name: 'group1',
          title: '分组 1',
          icon: 'el-icon-s-home',
          children: [
            {
              title: '页面 1',
              path: '/page1',
              icon: 'el-icon-s-order',
            },
            {
              title: '页面 2',
              path: '/page2',
              icon: 'el-icon-s-data',
            },
          ],
        },
        {
          name: 'group2',
          title: '分组 2',
          icon: 'el-icon-s-management',
          children: [
            {
              title: '页面 3',
              path: '/page3',
              icon: 'el-icon-s-flag',
            },
            {
              title: '页面 4',
              path: '/page4',
              icon: 'el-icon-menu',
            },
          ],
        },
      ],
      activeMenu: '',
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeMenu = index;
      this.$router.push(index);
    },
  },
};
</script>

In the parent component PageLayout.vue, we first set the page title pageTitle, the menu list menuList and the two status values ​​activeMenu and isCollapse for the expansion and closing of the menu. Then the Layout component of Element UI is used to build the basic structure of the page, with the menu bar on the left and the tab content on the right. In the menu component el-menu, we render the menu groups and menu items through the v-for loop. The menu items are bound to the corresponding routing paths. When the menu items are clicked, the handleSelect method is triggered and the routing path is passed into $router. Jump to the corresponding page in the push method. In this component we need to use router-view to display the corresponding routing component.

2. Implement the Tab component and multi-tab function

After completing the page layout and routing configuration, we need to implement the tab component and multi-tab function in the page, and Write the corresponding js code. In the multi-tab function, you first need to implement the tab bar component TabBar.vue, which is used to display the title of each tab and control the addition and deletion of tabs.

<template>
  <div class="tab-bar" :class="{ fixed: isFixed }">
    <div class="tab-bar-content">
      <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentIndex === index }" @click="handleChange(index)">
        {{ tab.title }}
        <i class="el-icon-close" @click.stop="handleRemoveTab(index)"></i>
      </div>
      <i class="el-icon-circle-plus add-tab-btn" @click.stop="handleAddTab"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleChange(index) {
      this.$emit('tabchange', index);
    },
    handleAddTab() {
      this.$emit('addtab');
    },
    handleRemoveTab(index) {
      this.$emit('removetab', index);
    },
  },
};
</script>

In this component, we render the title of each tab as a tab-item by using a v-for loop to render the incoming tabs array. The selected tab page will add active class to tab-item to highlight the currently selected tab page. The tab-bar component comes with three events: tabchange is used to listen for tab switching events, addtab and removetab are used to listen for tab addition and removal events, so as to update the value of the tabs array in the parent component.

In the parent component PageLayout.vue, we need to add the TabBar component below the page structure, pass in the tabs and currentIndex properties, and then update the tabs array in the corresponding event method so that the operations can correspond tab page.

<template>
  <div class="page-container">
    ...
    <el-main>
      <tab-bar :tabs="tabs" :currentIndex="currentIndex" :isFixed="isFixed" @tabchange="handleChange" @addtab="handleAddTab" @removetab="handleRemoveTab"/>
      <router-view v-if="$route.meta.keepAlive"/>
      <keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </keep-alive>
    </el-main>
  </div>
</template>

<script>
import TabBar from '../components/TabBar.vue';

export default {
  name: 'PageLayout',
  components: {
    TabBar,
  },
  data() {
    return {
      tabs: [
        {
          title: '首页',
          path: '/',
        },
      ],
      currentIndex: 0,
      isFixed: false,
    };
  },
  created() {
    this.$router.afterEach((to, from) => {
      const index = this.tabs.findIndex(tab => tab.path === to.path);
      if (index !== -1) {
        this.currentIndex = index;
        this.isFixed = false;
      } else {
        this.addTab(to);
      }
    });
  },
  methods: {
    handleChange(index) {
      this.$router.push(this.tabs[index].path);
    },
    handleAddTab() {
      const isExist = this.tabs.find(tab => tab.path === this.$route.path);
      if (!isExist) {
        this.tabs.push({
          title: this.$route.meta.title || '',
          path: this.$route.path,
        });
        this.currentIndex = this.tabs.length - 1;
        this.isFixed = false;
      } else {
        this.currentIndex = this.tabs.indexOf(isExist);
        this.isFixed = false;
      }
      this.$router.push(this.$route.path);
    },
    handleRemoveTab(index) {
      const targetTab = this.tabs[index];
      const targetPath = targetTab.path;
      this.tabs.splice(index, 1);
      if (targetPath === this.$route.path) {
        const lastIndex = this.tabs.length - 1;
        const lastTab = this.tabs[lastIndex];
        this.currentIndex = lastIndex;
        this.$router.push(lastTab.path);
      } else {
        this.currentIndex = this.tabs.findIndex(tab => tab.path === this.$route.path);
      }
    },
  },
};
</script>

In PageLayout.vue, we first created the tabs array to store the routing information of each tab page. In the created hook function, we listen for changes in the current route and find the corresponding tab route in the tabs array. If it exists, navigate directly to the corresponding tab, otherwise add the current route as a new tab. In the handleAddTab method, if the tab corresponding to the current route already exists, select the existing tab directly, otherwise add a new tab to the tabs array. In the handleRemoveTab method, we use the splice method of the array to delete the existing tab, locate the currently selected tab in the tabs array, and update the jump information of currentIndex and $router.

3. Summary

In this article, we introduce how to use the Vue framework and related plug-ins to implement the tab component and multi-tab page functions. During the actual implementation process, components or codes need to be flexibly adjusted according to specific scenarios to better adapt to actual project needs. In general, the tab component and multi-tab function can provide better usability and user experience for the project, and better solve the architectural problems of the front-end page.

The above is the detailed content of How to implement tab components and multi-tab pages in Vue?. For more information, please follow other related articles on the PHP Chinese website!