Vue's Multi-tab implementation

Record a VUE background management project-the implementation of the Multi-tab component:
The renderings are probably like this:

Click on the left side of the menu bar, will open the corresponding tabs, these tags can be closed, you can switch;
The framework used is Vue, the UI library used is element, and the layout is composed of Vue-router and Vuex:

Module	Component Name
Head	Header
Left menu	Leftmenu
tab bar	Tagsview
Main viewport	Appmain

This document is a Tagsview note .
Tagsview main functions:
1. Generate an open route, the label corresponding to the current route is the active state;
2. Switching routes;
3. Close the page sign;
4. Open the label too much, beyond the width of the container, on the container can be used to switch up and down (the module of this project is divided by business, because the container to place the wheel is not business associated with the entire multi-label component, then the wheel container is a separate component, has its own roller events, Leave slot slots into Tagsview)

For multi-tabbed pages, each label is a router-link, and generating these tags router-link the most important is the record of the browsed route, and listen to the change of the route; This project uses Vuex to record the browsed routes;

Let's talk about the Vuex configuration of the Multi-tab page:

Create a new tagsview.js under store/modules/, and the specific submission method will be analyzed in detail when used in the component

Const Tagsview ={state:{visitedviews:[],//Store all browsed and non-repeating routing data}, mutations:{//this add_visited_views: (state
      , view) =>{//open new tab--Add route data method if (State.visitedviews.some (V=>v.path==view.path)) return; State.visitedviews.push ({name:view.name, Path:view.path, Title:view.meta.title | | ' No-title '}}, Del_visited_views: (state,view) =>{//close Tab--method for deleting route data for (let [i,v] of State.visitedv
      Iews.entries ()) {if (V.path = = View.path) {state.visitedviews.splice (i,1) Break} }}, actions:{//call here to trigger mutations, how to invoke. Use this in the component $store. Dispatch (' action in corresponding name ', parameter) addvisitedviews ({Commit},view) {//by deconstructing the Commit method commit (' Add_visi Ted_views ', view)//Go to trigger add_visited_views, and pass in the parameter}, Delvisitedviews ({Commit,state,view) {///delete the route stored in the array, you need to refresh the route again. This is an asynchronous process that requires a fallback function, so using and returning the Promise object can also allow the component to be used at the time of the call. Then method//commit (' Del_visited_views ', view) return new Prom Ise ((Resolve) =>
        {//resolve method: The way to return after a successful future is commit (' del_visited_views ', view);
      Resolve ([... state.visitedviews]); })}}} "export default Tagsview

After this moudle is finished, don't forget to put it in the Vuex.store instance.

Import vue from ' Vue ';
Import Vuex from ' Vuex ';
Import Tagsview from './modules/tagsview.js '
import getters from './getter.js '

vue.use (VUEX)
const store= New Vuex.store ({
  modules:{
    tagsview
  },
  getters
})

export default Store

Another getters.js is this:

Const getters ={
  visitedviews:state = state.tagsview.visitedviews
}
export default getters

Tagsview.vue: Initial rendering of the tab page

<template id= "" >
  <div class= "Tags-view-container" >
    <scroll-panel class= "Tags-view-wrap" >
      <router-link v-for= "tag in Array.from (visitedviews)": to= "Tag.path": key= "Tag.path"  class= " Tags-view-item ": class=" isActive (tag)? ' Active ': ' ">
        {{tag.title}}
         <span class= ' el-icon-close ' @click. prevent.stop=" Delselecttag (tag) "> </span>
      </router-link>
    </scroll-panel>
  </div>
</template>

Scroll-panel: Container Components

Visitedviews from computed properties:

computed:{
    visitedviews () {//store value return this
      . $store. State.tagsview.visitedviews
    }
  },

The IsActive () method is used to determine whether the route for a page sign is the current route

methods:{
    isActive (route) {
      return Route.path = = this. $route. Path
    },
  }

Open a tab page

In addition, clicking on the left-hand menu tree, or clicking on other tab tabs, will result in a change in routing, which requires a watcher

watch:{
    $route () {
      this.addviewtags ();
    }
  },

The Addviewtags () method is triggered when the route changes, and submits the Addvistitedviews method in the store, which determines whether the newly opened route is stored before the new one, if it is not sent to the array, according to the route data stored in the state. The array will change

methods:{
    addviewtags () {///the method to execute when the route is changed
      if (this. $route. Name) {
        Const route = this. $route
         this.$ Store.dispatch (' Addvisitedviews ', route);}}
    ,   
  }

Close a tab:
The Delselecttag () method is used to close a tab, where the Delvisitedviews method in the commit store is executed, and after the method executes the data in the deleted array, the route is changed;

methods:{Delselecttag (route) {//Submit the method of deleting data first, after removing the data from the array, If you turn off the route that is currently open, you need to change the route to the last route in the array push. $store. Dispatch (' Delvisitedviews ', route). Then ((views) =>{if (this
            . IsActive (route)) {//only if you close the currently open tab will affect let Lastview = Views.slice (-1) [0]//Select the last one in the routing array (Lastview) {
          this. $router. push (Lastview);
          }else{this. $router. push ('/'); }
        }
      })
    }
  }