Fallstricke beim dynamischen Menü, dynamischen Laden von Routen und Aktualisieren in Vue

Vue von „vue“ importieren
Router von „vue-router“ importieren
Layout aus '@/layout' importieren

Vue.use(Router)

exportiere const konstanteRouten = [{
  Pfad: '/login',
  Name: 'Anmelden',
  Komponente: () => import('@/views/login/index'),
  versteckt: wahr,
}, {
  Pfad: '/404',
  Name: '404',
  Komponente: () => import('@/views/error-page/404'),
  versteckt: wahr
}, {
  Pfad: '/401',
  Name: '401',
  Komponente: () => import('@/views/error-page/401'),
  versteckt: wahr
}, {
  Weg: '/',
  Komponente: Layout,
  Umleitung: '/dashboard',
  Kinder: [
    {
      Pfad: 'Dashboard',
      Komponente: () => import('@/views/dashboard/index'),
      Name: "Dashboard",
      meta: { Titel: 'Homepage', Symbol: 'Dokumentation' }
    },
    {
      Pfad: 'xxx',
      Komponente: () => import('xxxxx'),
      Name: "xxx",
      Meta: {Titel: „XXX“, Symbol: „Komponente“},
      Kinder: [
          {
            Pfad: 'Host',
            Name: 'Host',
            Meta: { 
              Titel: 'xxx', 
              Schlüssel: "Host"
            }
          },
          {
            Pfad: "Steuerung",
            Name: "Steuerung",
            alwaysShow: true,
            Meta: { 
              Titel: 'xxx', 
              Taste: „Steuerung“
            },
            Kinder: []
          },
          {
            Pfad: "Signal",
            Name: "Signal",
            alwaysShow: true,
            Meta: { 
              Titel: 'xxx', 
              Schlüssel: 'Signal',
            },
            Kinder: [] 
          },
          {
            Pfad: 'Gateway',
            Name: "Gateway",
            alwaysShow: true,
            Meta: { 
              Titel: 'xxx', 
              Schlüssel: „Gateway“
            },
            Kinder: []
          } 
      ]
    },
    {
      Pfad: "Treffen",
      Name: 'Treffen',
      Meta: {Titel: „xxx“, Symbol: „Liste“}
    },
    {
      Pfad: „Spuren“,
      Komponente: () => import('@/views/xxx'),
      Name: 'Spuren',
      Meta: {Titel: „xxx“, Symbol: „Diagramm“}
    }
]
}, 
  {
    Weg: '*',
    Weiterleitung: '/404',
    versteckt: wahr
  }
]

const router = neuer Router({
  // Modus: „Verlauf“, // Serviceunterstützung erforderlich
  scrollVerhalten: () => ({
    j: 0
  }),
  //Routen: Initialisierung von constantRoutes-Guards, hier auskommentiert})

//Lösen Sie das Problem wiederholter Routen router.$addRoutes = (params) => {
  router.matcher = neuer Router({ // Routing-Regeln zurücksetzen scrollBehavior: () => ({
      j: 0
    })
  }).matcher
  router.addRoutes(params) // Routen hinzufügen}

Standardrouter exportieren

//Überwachungsrouten zum Schutz dynamischer Routen router.beforeEach((to, from, next) => {
  
  const routes = store.state.app.routes

  console.error('beforeEach-Schutz ausgeführt')

  //Erste Ladeaktualisierung verarbeiten, wenn (routes.length === 0) {
     console.error('Erstes Mal/aktualisiert')

     //Routen-Cache aktualisieren const cacheRoute = getLocalRouteInfo()
     
     const routeValue = asyncRouteDataToRoute(cacheRoute.asyncRouteData, constantRoutes)
     
     speichern
      .dispatch('app/setRoutes', Routenwert)

     router.$addRoutes([...routenwert])

     nächste({
        ...Zu,
        ersetzen: wahr
     })
     zurückkehren
   } 

   nächste()
})

/**
 * Aktualisieren Sie die Routing-Metadaten des Untermenüs der dritten Ebene */
export const updateIPChildRoutes = Funktion(Routen, Pfad, Kinder) {
    returniere setRouteArrayChildren(Routen, Pfad, untergeordnete Elemente)
}

/**
 * Untermenü entsprechend dem übergeordneten Menü laden * @param {*} routeKey 
 * @returns 
 */
exportiere const generateIPChildRoutes = function(routeKey) {
    returniere neues Promise((lösen, ablehnen) => {
      wenn (!routeKey) return
      
      
      // const start = getDateSeconds(neues Date())
      // const end = setDateSeconds(neues Date(), 15, 'm')
      
      const filterAddr = grafanaAddrs.filter(addr => addr.key === routeKey)[0]
      const matchup = filterAddr.matchup
  
      Konstante Parameter = {
        Zusammenspiel
      } 
  
      //Router dynamisch hinzufügen
      versuchen {
        fetchIPInstance(params).then(ipAddrs => {
          const ipRoutes = []
          ipAddrs.fürJeden(
            Adresse => {
                const ipInstance = addr.instance.replace(/^(.*):.*$/, "$1")
  
                wenn(!istIPAdresse(ipInstance)) 
                  zurückkehren
  
                const existRoute = ipRoutes.find(ip => ip.meta && ip.meta.key === ipInstance)
  
                !existRoute && ipRoutes.push(
                  {
                    Pfad: ipInstance,
                    Name: ipInstance,
                    Meta: { 
                        Titel: ipInstance, 
                        Schlüssel: ipInstance
                    }
                  }
                )
            }
          )
          auflösen(ipRoutes)
        })
      } Fehler abfangen {
        ablehnen(Fehler)
        console.error(`Fehler beim Laden des Untermenüs`)
      }
    })
}

importiere { isArray, setRouteArrayChildren } von './tool'

// Routen-Cache-Wert festlegen const localRouteKey = "LOCALROUTESET";

/**
 * currentPath: '' // Aktuell aufgerufener Routenpfad * routeData: [], // Gespeicherte komplette Routendaten (nur beim Laden des Menüs verfügbar)
 * asyncRouteData: [] //Dynamische Routendaten (werden zum Generieren neuer Routen verwendet)
 * {
 * parentKey //übergeordneter Schlüssel
 * Route: [
 * {
            Weg: ,
            Name: ,
            Meta: { 
                Titel: , 
                Schlüssel: 
            }
        }
 * ]
 * }
 */

Exportfunktion getLocalRouteInfo() {
  const data = localStorage.getItem(localRouteKey);

  Daten zurückgeben? JSON.parse(Daten): {};
}

Exportfunktion setLocalRouteInfo(Daten) {
  const localData = getLocalRouteInfo();

  localStorage.setItem(
    lokalerRoutenschlüssel,
    JSON.stringify({
      ...lokaleDaten,
      ...Daten,
    })
  );
}

Exportfunktion removeLocalRouteInfo() {
  localStorage.removeItem(localRouteKey);
}

/**
 * Lokaler Cache in Routing-Metadaten umgewandelt* @param {*} constantRoutes Routing-Vorlage*/
Exportfunktion asyncRouteDataToRoute(asyncRouteData, constantRoutes) {
   let route = konstanteRouten
   wenn (isArray(asyncRouteData) und asyncRouteData.length > 0) {
     asyncRouteData.fürJeden(
        Daten => {
          Route = setzeRouteArrayChildren(Route, Daten.übergeordneterSchlüssel, Daten.Route)
        }
     )
   }
   Rückweg
}

/**
 * Legen Sie die untergeordneten Routenattribute fest * @param {*} Routen 
 * @param {*} Pfad 
 * @param {*} untergeordnete Elemente 
 * @returns 
 */
export const setRouteArrayChildren = Funktion(Routen, Pfad, Kinder) {

  wenn (!isArray(routes) || !path)
     gibt neues Array zurück()
  
  für (const Route von Routen) {
    wenn (istArray(route.children)) {
      wenn (route.pfad === Pfad && route.children.length === 0) {
        route.children.push(...Kinder)
      } anders {
        setRouteArrayChildren(route.children, Pfad, Kinder)
      }
    }
  }

  Hin- und Rückwege
}

onExpandMenu(Schlüssel, Schlüsselpfad) {
      console.error(Schlüssel, Schlüsselpfad)

      const Pfad = Schlüssel.Substring(Schlüssel.lastIndexOf('/') + 1)
      console.error(Pfad)
      

      //Überwachungsmenü/Routing der Ebene 3 dynamisch generieren const ipAddrKeys = []
      grafanaAddrs.fürJeden(
        Adresse => {
          wenn (Adresse.Übereinstimmung) {
            ipAddrKeys.push(Adresse.Schlüssel)
          }
        }
      )

      if (Pfad && ipAddrKeys.includes(Pfad)) {

         generateIPChildRoutes(Pfad)
         .then(ipAddrs => {
           
          wenn (isArray(ipAddrs)) {

            //Dynamische Routingdaten zwischenspeichern const localRouteInfo = getLocalRouteInfo()
            const cacheRoutes = localRouteInfo.asyncRouteData || []
            cacheRoutes.push(
                {
                    parentKey: Pfad,
                    route:ipAdressen
                }
              )
            setLocalRouteInfo({
              asyncRouteData: CacheRouten
            })

            //Route aktualisieren
            let asyncRoutes = store.state.app.routes

            asyncRoutes = updateIPChildRoutes(asyncRoutes, Pfad, IP-Adressen)
            
            speichern
              .dispatch('app/setRoutes', asyncRoutes)
            
            router.$addRoutes([...asyncRoutes])

          }
         })
      }
    }