React-based multi-tab switching method and system, electronic equipment and storage medium

Abstract

The invention discloses a React-based multi-tab switching method and system, electronic equipment and a storage medium, and is applied to the technical field of information. When a user needs to switch a tab page, a system firstly checks whether a component corresponding to a target tab page is cached or not; and if the instance of the component already exists in the cache, the system directly obtains and displays the instance from the cache, so that the re-creation of the component is avoided, and the system performance is improved. And if the instance of the component does not exist in the cache, the system creates the component instance and adds the component instance into the cache. In this way, the efficient multi-label page switching method based on the React is provided.

Description

Technical Field

[0001] The present application relates to the field of information technology, and in particular to a multi-tab switching method, system, electronic device and storage medium based on React. Background Art

[0002] React is an open source JavaScript library developed and maintained by Facebook for building user interfaces. It is mainly used to build user interfaces in single page applications (SPAs), but can also be used to develop other types of interfaces.

[0003] In some systems, the need for multiple tabs is very common, and users often need to jump between multiple tabs. For example, when filling out a form (corresponding to one tab), they need to query a list (corresponding to another tab) to obtain some field information and then return to the form page to fill it out. Such a requirement can be achieved by using the keep-alive component in Vue, another JavaScript library for building user interfaces. However, in React, the routing library React Router will uninstall the component after switching routes, and it does not provide a similar keep-alive function. Therefore, it becomes particularly difficult to implement the multi-tab switching function in React. Summary of the invention

[0004] The purpose of this application is to provide a multi-tab switching function based on React.

[0005] In the first aspect, an embodiment of the present application provides a multi-tab switching method based on React. The method is executed by a user end, and the method includes: receiving a user request to switch from a current tab to a target tab; determining whether the component corresponding to the target tab has been cached according to the user request; if it is determined that the component corresponding to the target tab has been cached, obtaining the component corresponding to the target tab from the cache; if it is determined that the component corresponding to the target tab has not been cached, creating a new component corresponding to the target tab, and writing the component corresponding to the target tab into the cache; and, switching from the current tab to the target tab based on the component corresponding to the target tab.

[0006] In some embodiments, the component includes a component route, a component name, a unique identifier, a breadcrumb name, an icon when a tab is displayed, an activated menu item, and a field indicating whether to hide the menu item.

[0007] In some embodiments, the user request is generated by the user selecting a component corresponding to a target tab page in a current tab page.

[0008] In some embodiments, the user request is generated by the user entering an identifier of a target tab in a browser address bar.

[0009] In some embodiments, the method further includes: in response to a user's selection operation on an established tab, obtaining a component corresponding to the established tab from a cache; and switching from a current tab to the established tab based on the component corresponding to the established tab.

[0010] In some embodiments, the method further includes: in response to a user closing operation on a created tab, deleting a component corresponding to the created tab from the cache.

[0011] In some embodiments, the method also includes: in response to a user refresh operation on the current tab page, determining whether the user has set persistent caching for the component corresponding to the tab page; in response to determining that the user has set persistent caching for the component corresponding to the tab page, obtaining the component corresponding to the current tab page from the persistent cache, and initializing the page based on the component corresponding to the current tab page.

[0012] In some embodiments, the persistent cache is implemented through a state management plug-in Valtio and a storage interface LocalStorage.

[0013] In some embodiments, the persistent cache is implemented through a third-party state management plug-in and a third-party persistent local storage interface.

[0014] In the second aspect, an embodiment of the present application provides a multi-tab switching system based on React. The system is implemented on the user side, and the system includes a receiving module, a routing module and a display module. The receiving module is used to receive a user request to switch from the current tab to the target tab. The routing module is used to: determine whether the component corresponding to the target tab has been cached according to the user request; if it is determined that the component corresponding to the target tab has been cached, obtain the component corresponding to the target tab from the cache; if it is determined that the component corresponding to the target tab has not been cached, create a new component corresponding to the target tab, and write the component corresponding to the target tab into the cache. The display module is used to switch from the current tab to the target tab based on the component corresponding to the target tab.

[0015] In some embodiments, the component includes a component route, a component name, a unique identifier, a breadcrumb name, an icon when a tab is displayed, an activated menu item, and a field indicating whether to hide the menu item.

[0016] In some embodiments, the user request is generated by the user selecting a component corresponding to a target tab page in a current tab page.

[0017] In some embodiments, the user request is generated by the user entering an identifier of a target tab in a browser address bar.

[0018] In some embodiments, the routing module is further used to: in response to a user's selection operation on an established tab, obtain a component corresponding to the established tab from a cache. Accordingly, the display module is further used to switch from the current tab to the established tab based on the component corresponding to the established tab.

[0019] In some embodiments, the routing module is further used to: in response to a user closing operation on a created tab, delete a component corresponding to the created tab from the cache.

[0020] In some embodiments, the routing module is further used to: in response to a user refreshing operation on the current tab page, determine whether the user has set a persistent cache for the component corresponding to the tab page; in response to determining that the user has set a persistent cache for the component corresponding to the tab page, obtain the component corresponding to the current tab page from the persistent cache. The display module is also used to initialize the page based on the component corresponding to the current tab page.

[0021] In some embodiments, the persistent cache is implemented through a state management plug-in Valtio and a storage interface LocalStorage.

[0022] In some embodiments, the persistent cache is implemented through a third-party state management plug-in and a third-party persistent local storage interface.

[0023] In a third aspect, an embodiment of the present application provides an electronic device comprising a processor and a memory, wherein the memory stores program code, and when the program code is executed by the processor, the processor executes the React-based multi-tab switching method as described in the first aspect.

[0024] In a fourth aspect, the present application provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the React-based multi-tab switching method as described in the first aspect.

[0025] In a fifth aspect, an embodiment of the present application provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium; when a processor of an electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the React-based multi-tab switching method as described in the first aspect.

[0026] In an embodiment of the present application, when a user wants to switch tabs, the system first checks whether the component corresponding to the target tab has been cached. If an instance of the component already exists in the cache, the system directly obtains and displays it from the cache, avoiding recreating the component, thereby improving system performance. If an instance of the component does not exist in the cache, the system creates a component instance and adds it to the cache. In this way, an efficient multi-tab switching method based on React is provided.

[0027] Other features and advantages of the present application will be described in the following description, and partly become apparent from the description, or understood by practicing the present application. The purpose and other advantages of the present application can be realized and obtained by the structures specifically pointed out in the written description, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the related technologies, the drawings required for use in the embodiments or the related technical descriptions are briefly introduced below. Obviously, the drawings described below are only the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0029] Figure 1 This is an exemplary flowchart of the React-based multi-tab switching method provided in the first embodiment of the present application.

[0030] Figure 2 This is an exemplary flowchart of the React-based multi-tab switching method provided in the second embodiment of the present application.

[0031] Figure 3 This is an exemplary flowchart of the React-based multi-tab switching method provided in the third embodiment of the present application.

[0032] Figure 4 This is an exemplary flowchart of the React-based multi-tab switching method provided in the fourth embodiment of the present application.

[0033] Figure 5 An exemplary block diagram of a React-based multi-tab switching system provided in an embodiment of the present application.

[0034] Figure 6 An exemplary block diagram of an electronic device provided in accordance with an embodiment of the present application. DETAILED DESCRIPTION

[0035] In order to make the purpose, technical scheme and advantages of the present application clearer, the technical scheme in the embodiment of the present application will be clearly and completely described below in conjunction with the drawings in the embodiment of the present application. Obviously, the described embodiment is only a part of the embodiment of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application. In the absence of conflict, the embodiments in the present application and the features in the embodiments can be arbitrarily combined with each other. In addition, although the logical order is shown in the flow chart, in some cases, the steps shown or described can be performed in an order different from that here.

[0036] The terms "first", "second", etc. in the specification and claims of this application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the invention described herein can be implemented in sequences other than those illustrated or described herein.

[0037] In this application, a component refers to a functional module within a system (for example, a middle office management system). Some components are visible to users, and components can be large or small. For example, a tab page can correspond to a component, and a line of text or a (virtual) button can also correspond to a component. The address corresponding to the tab page can also be called a route, and accordingly, switching routes is equivalent to switching tab pages.

[0038] Figure 1 1 is an exemplary flow chart of a multi-tab switching method based on React provided in the first embodiment of the present application. Process 100 is executed by a user terminal. Figure 1 As shown, process 100 includes the following steps.

[0039] Step 110: receiving a user request to switch from the current tab page to the target tab page.

[0040] In some embodiments, the user request is generated by the user selecting a component corresponding to a target tab page in the current tab page. Exemplarily, the selection here may refer to a combination of one or more operations such as clicking, touching, and voice control.

[0041] In some embodiments, the user request is generated by the user entering the address of the target tab (eg, URL) in the browser address bar.

[0042] Step 120: Determine whether the component corresponding to the target tab page has been cached according to the received user request.

[0043] In some embodiments, the component corresponding to the tab page includes a component route, a component name, a unique identifier, a breadcrumb name, an icon when the tab page is displayed, an activated menu item, and a field indicating whether the menu item is hidden. The component route includes an address corresponding to the tab page, for example, a URL (Uniform Resource Location) corresponding to the tab page.

[0044] If it is determined that the component corresponding to the target tab page has been cached, the user end executes step 130. If it is determined that the component corresponding to the target tab page has not been cached, the user end executes step 140.

[0045] Step 130, obtaining the component corresponding to the target tab from the cache.

[0046] Step 140: create a component corresponding to the target tab page, and write the component corresponding to the target tab page into the cache.

[0047] Caching is a storage mechanism designed to provide high-speed access to saved data or calculation results. By storing data in a temporary storage location, when the data is needed again, it can be quickly retrieved from the cache instead of re-performing the expensive and time-consuming acquisition and calculation process of the original data.

[0048] Step 150 , switching from the current tab page to the target tab page based on the component corresponding to the target tab page.

[0049] The user end may render the component corresponding to the tab page (including but not limited to the target tab page) to display the tab page. The display method may be the tab page switching mentioned here or the tab page refreshing mentioned later.

[0050] Figure 2 is an exemplary flow chart of a multi-tab switching method based on React provided in the second embodiment of the present application. Figure 2 As shown, process 200 includes the following steps.

[0051] Step 210: receiving a user request to switch from the current tab page to the target tab page.

[0052] Step 220: Determine whether the component corresponding to the target tab page has been cached according to the received user request.

[0053] If it is determined that the component corresponding to the target tab page has been cached, the user end executes step 230. If it is determined that the component corresponding to the target tab page has not been cached, the user end executes step 240.

[0054] Step 230, obtaining the component corresponding to the target tab from the cache.

[0055] Step 240: create a component corresponding to the target tab page, and write the component corresponding to the target tab page into the cache.

[0056] Step 250 , switching from the current tab page to the target tab page based on the component corresponding to the target tab page.

[0057] More details about steps 210 to 250 can be found in Figure 1 and its related descriptions, which will not be repeated here.

[0058] Step 260 , in response to the user's selection operation on the created tab page, obtaining a component corresponding to the created tab page from the cache.

[0059] With reference to the aforementioned embodiment, the selection operation may refer to a combination of one or more operations such as clicking, touching, and voice control.

[0060] According to the above content, the components corresponding to the created tabs already exist in the cache. Therefore, when the user wants to browse the created tabs, the user terminal can directly obtain the components corresponding to the created tabs from the cache. In this way, the system performance can be further improved.

[0061] Step 270: Switch from the current tab page to the created tab page based on the component corresponding to the created tab page.

[0062] With reference to the aforementioned embodiment, the user terminal may render the component corresponding to the created tab to display the created tab.

[0063] It should be noted that steps 260 to 270 may occur before steps 210 to 250, or may occur after steps 210 to 250. For example, the user terminal first switches from tab A to tab B according to steps 210 to 250, and then switches from tab B to tab C according to steps 260 to 270. In this case, tab B is first used as the target tab, and then as the created tab. Furthermore, the user terminal can also switch from tab C back to tab A according to steps 210 to 250. In this case, tab A is used as the target tab.

[0064] Figure 3 is an exemplary flow chart of a multi-tab switching method based on React provided in the third embodiment of the present application. Figure 3 As shown, the process 300 includes the following steps.

[0065] Step 310: Receive a user request to switch from the current tab page to the target tab page.

[0066] Step 320: Determine whether the component corresponding to the target tab page has been cached according to the received user request.

[0067] If it is determined that the component corresponding to the target tab page has been cached, the user end executes step 330. If it is determined that the component corresponding to the target tab page has not been cached, the user end executes step 340.

[0068] Step 330, obtaining the component corresponding to the target tab from the cache.

[0069] Step 340: create a component corresponding to the target tab page, and write the component corresponding to the target tab page into the cache.

[0070] Step 350 , switching from the current tab page to the target tab page based on the component corresponding to the target tab page.

[0071] More details about steps 310 to 350 can be found in Figure 1 and its related descriptions, which will not be repeated here.

[0072] Step 360: In response to the user closing the created tab, the component corresponding to the created tab is deleted from the cache.

[0073] When a user wants to close a tab (i.e., an already created tab), the component corresponding to the tab is deleted from the cache, which can save cache space and thus improve performance.

[0074] It should be noted that step 360 may occur before steps 310 to 350, or may occur after steps 310 to 350. For example, the user terminal first switches from tab A to tab B according to steps 310 to 350, and then closes tab B according to step 360. In this case, tab B is first used as the target tab, and then as the created tab. Furthermore, the user terminal can also switch from tab A to tab C, or from tab A to tab B (i.e., recreate tab B) according to steps 310 to 350. In this case, tab B or C is used as the target tab.

[0075] Figure 4 is an exemplary flow chart of a multi-tab switching method based on React provided in the fourth embodiment of the present application. Figure 4 As shown, process 400 includes the following steps.

[0076] Step 410: Receive a user request to switch from the current tab page to the target tab page.

[0077] Step 420: Determine whether the component corresponding to the target tab page has been cached according to the received user request.

[0078] If it is determined that the component corresponding to the target tab page has been cached, the user end executes step 430. If it is determined that the component corresponding to the target tab page has not been cached, the user end executes step 440.

[0079] Step 430, obtaining the component corresponding to the target tab from the cache.

[0080] Step 440: create a component corresponding to the target tab page, and write the component corresponding to the target tab page into the cache.

[0081] Step 450 , switching from the current tab page to the target tab page based on the component corresponding to the target tab page.

[0082] More details about steps 410 to 450 can be found in Figure 1 and its related descriptions, which will not be repeated here.

[0083] Step 460 , in response to the user refreshing the current tab page, determining whether the user has set persistent caching for the component corresponding to the tab page.

[0084] Users can pre-set whether to cache the components corresponding to the tabs persistently.

[0085] A persistent cache combines the fast access benefits of a cache with the data persistence of a persistent store. This means that data is not only quickly available in memory, but also survives a system restart or crash. A persistent cache can be implemented by storing data on a disk (such as a hard drive) or other non-volatile storage media.

[0086] In some embodiments, the persistent cache is implemented through the state management plug-in Valtio and the storage interface LocalStorage. Valtio is a proxy state management library for React and JavaScript applications. It uses the Proxy syntax in JavaScript to make it very convenient to integrate state management functions in React. LocalStorage is a Web storage API (Application Programming Interface) that allows websites to store data on the user's browser, and this data can still exist after the page is refreshed. Unless the user actively clears it or the browser settings limit the storage size, the data stored in LocalStorage has no expiration time.

[0087] In some embodiments, the persistent cache is implemented through a third-party state management plug-in and a third-party persistent local storage interface.

[0088] Step 470, in response to determining that the user has set persistent caching for the component corresponding to the tab page, obtaining the component corresponding to the current tab page from the persistent cache, and performing page initialization based on the component corresponding to the current tab page.

[0089] With reference to the foregoing embodiment, the user end may obtain the component corresponding to the current tab page from the address of the persistent cache, and render the component corresponding to the current tab page to initialize the page, thereby completing the refresh operation of the current tab page.

[0090] It should be noted that steps 460 to 470 may occur before steps 410 to 450, or may occur after steps 410 to 450. For example, the user terminal first switches from tab A to tab B according to steps 410 to 450, and then refreshes tab B according to steps 460 to 470. In this case, tab B is first used as the target tab and then as the current tab. Furthermore, the user terminal can also switch from tab B back to tab A according to steps 410 to 450. In this case, tab B is used as the target tab.

[0091] Similarly, process 100, steps 250-260, step 360, and steps 460-470 may be combined in any order.

[0092] At present, some extension solutions can also provide multi-tab switching functions based on React, but in comparison, the technical solution provided by this application has many advantages, including but not limited to: (1) At present, the mainstream version of React is v16.8+, and the mainstream version of react-router is v6+, but some extension solutions only support specific versions and do not meet the requirements of mainstream technical versions; the technical solution provided by this application has good compatibility, supports the latest version of React, does not limit the use of react-router versions, and is less invasive to the code; (2) The use of some extension solution APIs is too complicated, which is invasive and destructive to the code. The size of the solution is relatively large. If an existing project wants to use these solutions, it is necessary to replace the react-router in the project, and all places in the project that use routing-related APIs need to be modified accordingly, which is highly invasive to the code. The technical solution provided by this application will not change the main logic of the existing project. It only needs to modify the layout and routing jump-related logic to achieve it, which is less invasive to the code. (3) Some expansion solutions do not support route nesting, which is manifested as the inability to create a new tab corresponding to the sub-route. The technical solution provided by this application supports caching the data and status of sub-routes, that is, it supports caching of any nested routes. (4) Some expansion solutions have poor business expansion capabilities and are The stored multi-tab data is not exposed to the outside, and it is impossible to perform deep business expansion based on the multi-tab data. In the technical solution provided by the present application, the multi-tab data can be managed both internally and externally, and the business party can perform deeper business development based on the multi-tab data. (5) Some expansion solutions do not support the replacement of storage. The data and status of the multi-tabs are stored in the context (operating environment), and the storage cannot be customized according to the business. The technical solution provided by the present application supports customized state management and storage. If there is no special requirement, the default atomic state management plug-in Valtio will be used internally, and the storage will use LocalStorage. If there is a special requirement, a customized state management plug-in and storage can be used. (6) In some expansion solutions, since the data and status of the multi-tabs are stored in the context, once any data and status change, all tabs will be re-rendered, even if there are tabs that do not use the data, which will cause some unnecessary rendering, resulting in poor rendering performance. In the technical solution provided by the present application, if the default state management plug-in Valtio is used, since the publish-subscribe mode based on the proxy is used, each data update will only affect the components and tabs that use the data, avoiding unnecessary rendering.

[0093] Figure 5 5 is an exemplary module diagram of a multi-tab switching system based on React provided in an embodiment of the present application. The system 500 is implemented on the user side, for example, as a plug-in of the user side. Figure 5 As shown, the system 500 includes a receiving module 510 , a routing module 520 and a display module 530 .

[0094] The receiving module 510 is used to receive a user request to switch from the current tab page to the target tab page.

[0095] In some embodiments, the user request is generated by the user selecting a component corresponding to a target tab page in a current tab page.

[0096] In some embodiments, the user request is generated by the user entering an identifier of a target tab in a browser address bar.

[0097] The routing module 520 is used to: determine whether the component corresponding to the target tab page has been cached based on the received user request; if it is determined that the component corresponding to the target tab page has been cached, obtain the component corresponding to the target tab page from the cache; if it is determined that the component corresponding to the target tab page has not been cached, create a new component corresponding to the target tab page and write the component corresponding to the target tab page into the cache.

[0098] The display module 530 is used to switch from the current tab page to the target tab page based on the component corresponding to the target tab page.

[0099] In some embodiments, the routing module is further used to: in response to a user's selection operation on an established tab, obtain a component corresponding to the established tab from a cache. Accordingly, the display module is further used to switch from the current tab to the established tab based on the component corresponding to the established tab.

[0100] In some embodiments, the routing module is further used to: in response to a user closing operation on a created tab, delete a component corresponding to the created tab from the cache.

[0101] In some embodiments, the routing module is further used to: in response to a user refreshing operation on the current tab page, determine whether the user has set a persistent cache for the component corresponding to the tab page; in response to determining that the user has set a persistent cache for the component corresponding to the tab page, obtain the component corresponding to the current tab page from the persistent cache. The display module is also used to initialize the page based on the component corresponding to the current tab page.

[0102] In some embodiments, the persistent cache is implemented through a state management plug-in Valtio and a storage interface LocalStorage.

[0103] In some embodiments, the persistent cache is implemented through a third-party state management plug-in and a third-party persistent local storage interface.

[0104] More details about system 500 and its modules can be found elsewhere in this document and will not be repeated here.

[0105] refer to Figure 6 The embodiment of the present application further provides an electronic device 600, which includes a processor 610 and a memory 620. The memory stores a program code, and when the program code is executed by the processor 610, the processor 610 executes the React-based multi-tab switching method provided in the embodiment of the present application.

[0106] An embodiment of the present application also provides a computer-readable storage medium, which includes a program code. When the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute the React-based multi-tab switching method provided in the embodiment of the present application.

[0107] The embodiment of the present application also provides a computer program product, which includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. When the processor of the electronic device obtains the computer instructions from the computer-readable storage medium, the processor executes the computer instructions, so that the electronic device executes the React-based multi-tab switching method provided in the embodiment of the present application.

[0108] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A multi-tab switching method based on React, characterized in that: The method is executed by a user terminal, and the method includes: Receive a user request to switch from the current tab to the target tab; Determining whether the component corresponding to the target tab page has been cached according to the user request; If it is determined that the component corresponding to the target tab page has been cached, obtaining the component corresponding to the target tab page from the cache; If it is determined that the component corresponding to the target tab page is not cached, then a new component corresponding to the target tab page is created, and the component corresponding to the target tab page is written into the cache; And, switching from the current tab page to the target tab page based on the component corresponding to the target tab page.

2. The method according to claim 1, characterized in that: The component includes a component route, a component name, a unique identifier, a breadcrumb name, an icon when a tab is displayed, an activated menu item, and a field indicating whether to hide the menu item.

3. The method according to claim 1, characterized in that: The user request is generated when the user selects a component corresponding to a target tab page in a current tab page, or the user request is generated when the user enters the address of the target tab page in a browser address bar.

4. The method according to claim 1, characterized in that: The method further comprises: In response to a user's selection operation on an established tab page, obtaining a component corresponding to the established tab page from a cache; Switch from the current tab page to the created tab page based on the component corresponding to the created tab page.

5. The method according to claim 1, characterized in that The method further comprises: In response to a user closing operation on an established tab page, a component corresponding to the established tab page is deleted from a cache.

6. The method according to claim 1, characterized in that: The method further comprises: In response to a user refreshing operation on the current tab page, determining whether the user has set persistent caching for a component corresponding to the tab page; In response to determining that the user has set persistent caching for the component corresponding to the tab page, the component corresponding to the current tab page is obtained from the persistent cache, and the page is initialized based on the component corresponding to the current tab page.

7. The method according to claim 6, characterized in that The persistent cache is implemented through the state management plug-in Valtio and the storage interface LocalStorage, or the persistent cache is implemented through a third-party state management plug-in and a third-party persistent local storage interface.

8. A multi-tab switching system based on React, characterized in that: The system is implemented on a user terminal, and the system includes: A receiving module, used to receive a user request to switch from a current tab page to a target tab page; A routing module, used to: determine whether the component corresponding to the target tab page has been cached according to the user request; if it is determined that the component corresponding to the target tab page has been cached, obtain the component corresponding to the target tab page from the cache; if it is determined that the component corresponding to the target tab page has not been cached, create a new component corresponding to the target tab page and write the component corresponding to the target tab page into the cache; A display module is used to switch from the current tab page to the target tab page based on the component corresponding to the target tab page.

9. An electronic device, characterized in that: The device comprises a processor and a memory, wherein the memory stores program codes, and when the program codes are executed by the processor, the processor executes any one of the methods in claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The storage medium comprises a program code, and when the storage medium is run on an electronic device, the program code is used to enable the electronic device to execute any one of the methods described in claims 1 to 7.

Images