Verwenden Sie das Vue-Element-Admin-Framework, um die Menüfunktion dynamisch vom Backend abzurufen

exportiere const asyncRoutes = [
  { Pfad: '*', Umleitung: '/404', versteckt: true }
] 

importiere { asyncRoutes, constantRoutes } von '@/router'
importiere { fetchUserMenuList } von '@/api/user'
Layout aus '@/layout' importieren

/**
 * Lazy Loading für statische Routen * @param-Ansichtsformat muss mit xxx/xxx ohne Schrägstrich beginnen * @returns 
 */
export const loadView = (Ansicht) => {
  return (auflösen) => erfordern([`@/views/${view}.vue`], auflösen)
}

/**
 * Die vom Backend abgefragten Menüdaten in Routingformatdaten zusammenstellen* @param routes
 * @param data Menüdaten, die vom Backend zurückgegeben werden */
Exportfunktion generaMenu(Routen, Daten) {
  Daten.fürJeden(Element => {
    const Menü = {
      Pfad: item.url, 
      Komponente: item.component === '#' ? Layout : loadView(item.component), 
      hidden: item.status === 0, // versteckte Weiterleitung mit Status 0: item.redirect,
      Kinder: [],
      Name: Artikelcode,
      Meta: Element.Meta
    }

    wenn (Element.Kinder) {
      generaMenu(Menü.Kinder, Element.Kinder)
    }
    Routen.push(Menü)
  })
  Hin- und Rückwege
}

konstanter Zustand = {
  Routen: [],
  Routes hinzufügen: []
}

const Mutationen = {
  SET_ROUTES: (Status, Routen) => {
    state.addRoutes = Routen
    // Statische Routen und dynamische Routen verketten state.routes = constantRoutes.concat(routes)
  }
}

const Aktionen = {
  Routes generieren({ commit }, token) {
    gib ein neues Versprechen zurück (Auflösen => {
      // Holen Sie sich das Benutzermenü vom Backend über ein Token und fügen Sie es dem globalen Status hinzu fetchUserMenuList(token).then(res => {
        const menuData = Objekt.assign([], res.data)
        const tempAsyncRoutes = Object.assign([], asyncRoutes)
        const abgerufenRoutes = generaMenu(tempAsyncRoutes, menuData)

        commit('SET_ROUTES', aufgerufene Routen)
        auflösen(Zugriffsrouten)
      }).fangen(Fehler => {
        console.log(Fehler)
      })
    })
  }
}

Standard exportieren {
  Namespace: wahr,
  Zustand,
  Mutationen,
  Aktionen
}

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren

Vue.Verwenden(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const moduleFiles = require.context('./modules', true, /\.js$/)

// Sie müssen die App nicht aus „./modules/app“ importieren.
// es werden automatisch alle Vuex-Module aus der Moduldatei angefordert
const module = moduleFiles.keys().reduce((modules, modulePath) => {
  // setze './app.js' => 'App'
  const Modulname = Modulpfad.replace(/^\.\/(.*)\.\w+$/, '$1')
  Konstantwert = ModuleDateien(Modulpfad)
  Module[Modulname] = Wert.Standard
  Rückführmodule
}, {})

const store = neuer Vuex.Store({
  Module,
  Getter
})

Standardspeicher exportieren

MenüsRouten: Status => Status.Berechtigung.Routen 

Routen() {
      // gib dies zurück.$router.options.routes
      gib dies zurück.$store.getters.menusRoutes
    }, 

 // Menü abrufen. Beim Aufrufen von Aktionen in anderen Dateien müssen Sie { root: true } hinzufügen.
          dispatch('Berechtigung/Generieren von Routen', Daten, { root: true }).then((Zugriffsrouten) => {
            router.addRoutes(Zugriffsrouten)
          }) 

const accessRoutes = warte auf store.dispatch('permission/generateRoutes', store.getters.token)
          router.addRoutes(Zugriffsrouten)
          weiter({ ...zu, ersetzen: true })