introduce

Vue-multi-tab is a single page, multi-tab application based on VUE and Element-UI that implements tab-Router (a tab-based routing).

When I wrote this project before, I wrote an article about the practice experience of SPA multi-page TAB based on VUE, and then some enthusiastic netizens replied some other similar projects below. I checked one by one and found that they were basically based on VUe-Router and Keep-alive Implementation, the implementation method, there are two obvious problems, the first it is difficult to jump inside the TAB, such as I now this TAB to open the component a, and then click the component b in a link, I want to jump to the component b, but is needed under the condition of invariable in TAB open, can’t open in a new TAB, so it is hard to realize based on routing. Another problem is that we need to deal with the keep-alive problem. As most children who have been to the keep-alive pit know, BASED on the above reasons, I decided to give you a different implementation method

So how is my Vue-Multi-Tab different from other products? In addition to the multi-tab function, we have a number of features that are different from other similar products.

The online preview

Noahlam. Making. IO/vue – multi – t…

Main features:

  1. Can be in the TAB imagevue-routerSame jump component
  2. There is nokeep-alive, so there is no need to deal withkeep-aliveThe problem
  3. Dual history (internal TAB history and TAB history)
  4. similarvue-routerAPI (push, replace, back)
  5. All components are loaded asynchronously by default (although you can change to synchronous)
  6. You can refresh with a single TAB

The API list

  1. Open Opens a TAB
  2. Close Close a TAB
  3. ShowTab switch TAB
  4. Push tag jumps inside
  5. Replace Replace within the replace tag
  6. Back Back inside the label
  7. CloseAll Closes all tags
  8. CloseOthers Close all tags except the current one
  9. ReShow Displays labels and label components based on the address bar data
  10. Query gets the arguments passed by push,replace
  11. Info Gets the currently active TAB object

Tips: For more detailed API documentation, see here

Other instructions

Project address vue-multi-tab, if you find it useful, give a star to encourage.

Since I’m a person who hates memorizing a lot of apis, I’m just offering a few simple apis that satisfy most of my needs in order to keep learning costs down.

If you feel unable to meet your needs or find bugs or questions in use, welcome to issue here

Personal energy is limited, there are still many places for your joint participation, if you are interested in maintaining together, welcome PR.