Gründe und Lösungen für das Scheitern dynamisch hinzugefügter Routing-Seiten in Vue beim Aktualisieren

Problembeschreibung

Gestern, als ich an der Funktion zum dynamischen Hinzufügen von Berechtigungsseiten zu Routen im Vue-Backend-Verwaltungssystem arbeitete, stieß ich auf ein Problem: Beim Aktualisieren der Seite mit den dynamisch hinzugefügten Routing-Seiten trat ein 404-Fehler auf.

Szenario

Die Berechtigungskontrolle des Backend-Verwaltungssystems wird erreicht, indem der Berechtigungscode auf der Frontend-Seite definiert, der Code für die Backend-Kollegen gespeichert und in einer Tabelle konfiguriert wird. Anschließend wird die vom Backend zurückgegebene Berechtigungscodeliste gefiltert und mit der auf der Frontend-Seite konfigurierten Codemenüliste abgeglichen. Seiten mit gleichen Codes sind berechtigte Seiten und werden dann über router.addRoute() dynamisch zur Route hinzugefügt. Es kann nur auf Routen mit Berechtigung zugegriffen werden, andernfalls wird eine Meldung angezeigt, dass keine Berechtigung vorliegt.

Im neuen Router werden zu Beginn feste Routen gesetzt, wie zum Beispiel die Login-Seite login

Schnittstelle zurück

Frontend-Menüdefinition

Methoden in vuex

Probleme

Rufen Sie nach der Anmeldung die Methode in vuex auf, um den Erwerb des Berechtigungscodes abzuschließen, filtern Sie den Vorgang der Berechtigungsroutingseite dynamisch und fügen Sie dann das Berechtigungsmenü über router.addRoute () zur Route hinzu, rufen Sie die dynamisch hinzugefügte Routingseite auf und aktualisieren Sie die Seite, um 404 anzuzeigen

Ursachenanalyse

Beim Aktualisieren der Seite werden die Routen neu initialisiert. Die dynamisch hinzugefügten Routen existieren nicht mehr. Nur einige feste Routen (wie die Anmeldeseite) sind noch vorhanden, sodass ein 404-Fehler auftritt.

Lösung

Die im VUEX-Store gespeicherten Daten werden beim Aktualisieren der Seite gelöscht.
Treffen Sie eine Entscheidung über die globale Navigation router.beforeEach der Route und entscheiden Sie, ob die Seite aktualisiert wird, je nachdem, ob die in VUEX gespeicherte Liste einen Wert hat. Wenn dieser nicht 0 ist, handelt es sich um die erste Anmeldung. Nach der Anmeldung wird die passende Route verwendet, und es gibt kein Problem. Wenn list.length 0 ist, handelt es sich um eine Aktualisierungsseite, und Sie müssen die Routenübereinstimmung erneut ausführen und die dynamische Route erneut hinzufügen.

Implementieren Sie den Code route/index.js, um dem Navigationsschutz eine logische Beurteilung hinzuzufügen

———router.js————-

const konstanteRouten = [
 {
  Weg: '/',
  Umleitung: '/login'
 },
 {
  Pfad: '/login',
  Name: 'Anmelden',
  Meta: {
   Auth: falsch
  },
  Komponente: () => import('@/views/login')
 },
 {
  Pfad: '/layout',
  Name: "Layout",
  Meta: {
   Auth: wahr
  },
  Komponente: () => import('@/views/layout/index'),
  Kinder: [
   {
    Pfad: '/index',
    Name: "Index",
    Komponente: () => import('@/views/home')
   }
  ]
 },
 {
  Weg: '*',
  Komponente: () => import('@/views/error/404')
 }
]

Vue.use(VueRouter)
const createRouter = () =>
 neuer VueRouter({
  Routen: konstanteRouten
 })
Exportfunktion resetRouter() {
 const neuerRouter = createRouter()
 router.matcher = newRouter.matcher // Router zurücksetzen
}
const router = createRouter()
 
//Setze die dynamische Weiterleitung der Berechtigungsseite nach dem Aktualisieren der Seite zurück, um 404-Probleme beim dynamischen Routing zu vermeiden const reSetPermissionList = to => {
 returniere neues Promise((lösen, ablehnen) => {
  wenn (to.path !== '/login' und store.state.permission.permissionList.length === 0) {
   speichern
    .dispatch('Berechtigung/getPermissionList')
    .then(() => {
     auflösen('permCode')
    })
    .catch(Fehler => {
     auflösen('permCode')
    })
  } anders {
   lösen()
  }
 })
}
router.beforeEach((bis, von, weiter) => {
  
 const accessToken = localStorage.getItem('accessToken')
 if (_.isEmpty(accessToken)) {//Sind Sie angemeldet? Gehen Sie zur Anmeldeseite next({
   Pfad: '/login',
   Abfrage: {
    Umleitung: zu.vollständigerPfad
   }
  })
 } else { //Angemeldeter Benutzer betritt die Seite if (to.path === '/login') {
   weiter({ Pfad: '/index' })
  } anders {
    reSetPermissionList(to).then(data => {
     Daten === 'permCode' ? nächstes({ Pfad: zu.Pfad, Abfrage: zu.Abfrage }) : nächstes()
    })
  }
 }
 
})

Zusammenfassen

Es bestimmt hauptsächlich, ob die Daten in VUEX in der globalen Navigation vorhanden sind und ob die Seite aktualisiert wird. Wenn dies der Fall ist, durchläuft es erneut die Berechtigungsrouting-Matching-Methode.

Oben finden Sie ausführliche Informationen zu den Gründen und Lösungen für das Fehlschlagen der Aktualisierung der dynamisch hinzugefügten Routing-Seite von Vue. Weitere Informationen zur Aktualisierung der Vue-Routing-Seite finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!