Compared with single-page applications, the multi-tab framework brings a better experience for users to cross-page operations when processing multiple businesses at the same time, but it also makes us deal with more page interaction scenarios, and the code is relatively more complicated.
If your project no longer needs to use RouterTab, you can use the following steps to remove RouterTab.
# 1. Replace
Find all the global calls of
$tabs in your project, refer to the table below to use the replacement scheme.
| ||Newly opened tab|
| ||Close tab and jump to a new page|
| ||Refresh tab||Provide refresh data method inside the component|
| ||Reset tabs and jump to the default or specified page|
| ||Iframe tab related methods||Need to add a global iframe route to embed the page, and encapsulate method to operate the iframe page 面|
| ||Page leave confirmation|
Reference：Vue-Router In-Component Guards (opens new window)
# 2. Remove the
<router-tab>in the layout frame component
Refer to Getting Started instructions to remove related codes:
Remove the RouterTab installation code from the entry file
Remove RouterTab built-in routing and tab related configuration from routing configuration file
Remove RouterTab dependency
yarn remove vue-router-tab1
npm uninstall vue-router-tab1
# 3. Adjust the page interaction
Using single-page mode means that cross-page operations are no longer supported
You need to change the cross-page operations to the internal operations of a single page. You can use UI components such as dialogs, drawers, and subpages.