Vben Admin Multi-tag page status management source code learning

// Multi-tag information storageexport const useMultipleTabStore = defineStore({
  id: 'app-multiple-tab',
  state: { /*...*/ },
  getters: { /*...*/ }
  actions：{ /*...*/ }   
});
export function useMultipleTabWithOutStore() {
  return useMultipleTabStore(store);
}

// Multi-tab statusexport interface MultipleTabState { 
  cacheTabList: Set<string>;  // Cache Tab Routing Name  // Tag page routing list RouteLocationNormalized The standardized version of the routing record  tabList: RouteLocationNormalized[];  
  lastDragEndIndex: number; // The index of the label was dragged for the last time} 
state: (): MultipleTabState => ({ 
  cacheTabList: new Set(), 
  tabList: cacheTab ? (MULTIPLE_TABS_KEY) || [] : [],  // Priority loading of cache/local storage content  lastDragEndIndex: 0,
}),
getters: {
  // Get the tag page routing list  getTabList(): RouteLocationNormalized[] {
    return ;
  },
  // Get the cached tab page route name list  getCachedTabList(): string[] {
    return ();
  },
  // Get the index of the last drag label  getLastDragEndIndex(): number {
    return ;
  },
}, 

// Open the tabasync addTab(route: RouteLocationNormalized) {
  // Basic routing properties  const { path, name, fullPath, params, query, meta } = getRawRoute(route);
  // Error handling page Login Redirection etc page  if (
    path === PageEnum.ERROR_PAGE ||
    path === PageEnum.BASE_LOGIN ||
    !name ||
    [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
  ) {
    return;
  }
  let updateIndex = -1;
  // The tag page already exists, no tags are added repeatedly  const tabHasExits = ((tab, index) => {
    updateIndex = index;
    return ( || ) === (fullPath || path);
  });
  // The tag already exists, perform update operation  if (tabHasExits) {
    const curTab = toRaw()[updateIndex]; // Get the current tab routing record    if (!curTab) {
      return;
    }
     = params || ; // Dictionary of decoded parameters extracted from path     = query || ; // Dictionary of decoded query parameters extracted from the search part of the URL.     = fullPath || ; // The URL encoding is related to the routing address.  Includes path, query and hash.    (updateIndex, 1, curTab); // Replace the original tag page routing record  } else {
    // Add a tag page    // Get the number of dynamic route openings. If it exceeds 0, it means that it needs to control the number of openings.    const dynamicLevel = meta?.dynamicLevel ?? -1;
    if (dynamicLevel > 0) {
      // If the setting is greater than 0, then the number of opens of the route must be limited      // First get the real route and use configuration method to reduce calculation overhead.      // const realName: string = (/(\S*)\//)![1];
      const realPath = meta?.realPath ?? '';
      // Get the number of dynamic routes that have been opened and determine whether they are greater than a certain value      if (
        ((e) => ?.realPath ?? '' === realPath).length >= dynamicLevel
      ) {
        // Close the first one        const index = ((item) =>  === realPath);
        index !== -1 && (index, 1);
      }
    }
    (route); // Add to the routing list  }
  ();
  // Persist using local storage  cacheTab && (MULTIPLE_TABS_KEY, );
},

// Update the cache according to the currently opened tagasync updateCacheTab() {
  // Set collection storage  const cacheMap: Set<string> = new Set();
  for (const tab of ) {
    const item = getRawRoute(tab);
    // If the KeepAlive cache is ignored, no cache    const needCache = !?.ignoreKeepAlive;
    if (!needCache) {
      continue;
    }
    const name =  as string;
    (name);
  }
   = cacheMap; // Set collection that stores routing record names},

// Set the tag titleasync setTabTitle(title: string, route: RouteLocationNormalized) {
  const findTab = ((item) => item === route);
  if (findTab) {
     = title; // meta implementation Set the title title of each page    await ();
  }
},

// src\layouts\default\tabs\components\ 
<template>
  <Dropdown :dropMenuList="getDropMenuList" :trigger="getTrigger" @menu-event="handleMenuEvent">
    <div :class="`${prefixCls}__info`" @contextmenu="handleContext" v-if="getIsTabs">
      <span class="ml-1">{{ getTitle }}</span>
    </div> 
  </Dropdown>
</template>
props: {
  tabItem: {
    type: Object as PropType<RouteLocationNormalized>,
    default: null,
  },
  isExtra: Boolean,
},
// Get title informationconst getTitle = computed(() => {
  const { tabItem: { meta } = {} } = props;
  return meta && t( as string);
});