Introduction to the

Due to business needs, I need to add the function of multi-tab in the project (effect as shown in the following figure). The effect is to record opened routes and close routes. This article mainly records the development of components and the process of thinking, remember to click on the first look oh!

Project introduction

Vue3. X + typescript + vuUE – Router

Global state management using pinia (attach a document: pinia. Esm. Dev/introductio…).

Ps: Why not use VUEX for state management? A: Pinia is used because vuex’s support for typescript is not very friendly and type inference is lost when action is sent using strings

Use the UI element – plus

Let’s look at the initial architecture of the project:

Run the project and see

Now that we know the basic structure of the project and how it works, let’s start developing the multi-tab component

Component design

Problems and Solutions

1. When and where to record routes?

A: When the route changes, record the route and store it in Pinia. Considering that the refresh page also needs to keep the route storage, and store a copy in sessionStorage.

2. Can pages be cached when labels are changed?

A: Add the isCache configuration in the route configuration and use < keep-alive > to cache the page.

3. Where does the route go when the label is closed?

A: If the current TAB is not closed, close the TAB directly. If you close the current label, close it and switch to the route of the last label.

Component development

First we create the tabs component and state management for tabs:

Referencing in layouts:

The tabs TAB page must always exist because it is open by default. Create a constant and use sessionStorage to record the route. If a 404 page is redirected to a route that does not exist, the 404 page is not recorded

By right clicking the TAB, we can close the route, close other routes, and close all routes. Let’s implement 👇 one by one

We started to write the add and remove functions for routing:

Increase the routing

The idea is simple: When a route exists, push a route into the Tabs array as a TAB page

So what’s the timing of triggering this method? We listen for the route in the tabs component when the route changes and does not exist in the tabs array:

Close the routing

Once you know how to handle the new route, it is easy to close the route:

Note here that if we close the route for the current TAB, we need to jump to the last route in the Tabs array: in the Tabs component, the method above is triggered when the close button on the right side of the TAB is clicked:

Disabling Other Routes

To disable other routes, check whether the right – click TAB is the current route

If the route is the current route, only the home page and the current route are saved.

If it is not the current route, right-click the route on the page and save the route on the home page and the route on the page.

Get the current right-clicked route by recording the subscript of the right-clicked TAB:

Then look at the implementation in store:

Disabling all Routes

Simply go to the home page and set the tabs array to the home page route:

At this point, we have developed the operation on routing, but we still need the layout of the Tabs component and the effect of right-clicking the TAB 👇

Tabs component

Here I talk about the general idea, the implementation of specific details can be viewed at the end of the source 😊

  1. First, the Tabs component needs to iterate over the Tabs array and render multiple tabs. Here, we use the Element-Plus ScrollBar component to achieve this.

  2. Right click TAB we bind contextMenu event on the TAB. The menu uses fixed layout. Right click to get the left and top of the current mouse for positioning

  3. Use contentVisible to control menu invisibility. When contentVisible is true, bind a click event to the window and set contentVisible to False to hide the menu

  4. Minor optimizations for the ScrollBar wheel slide TAB

Ps: style words can be downloaded at the end of the source link to view

Page caching

Finally, let’s complete the function of switching TAB to page cache:

You can set the isCache property in router.ts to control whether the page is cached

Use keep – the alive

conclusion

So far, we have simply completed the vUE single page multi-tab scheme, of course, this is only about the implementation, there must be many deficiencies, but also can continue to optimize to achieve better results!

Source code: github.com/qaz61912862…

Give it a like, please!