vue.js Geschichte vs. Hash-Modus auf einem Unterpfad

Von Maximilian Batz | 2020-02-24

Falls Sie Ihren Vue Router nicht auf der Root-Seite, sondern auf einem "Unterpfad" montieren, gibt es einen wichtigen Unterschied im Verhalten des Vue Routers im History- und Hash-Modus.

Modus Geschichte

Wenn Sie zum Beispiel Folgendes verwenden möchten https://picockpit.local/debug/ den Vue-Router weiterleben zu lassen, in History-Modus:

Die folgenden Routen

{ Pfad: '/', Komponente: DebugOne},

{ Pfad: '/zwei', Komponente: DebugTwo},

{ Pfad: '*', Komponente: FourOhFour}

wird nicht funktionieren wie erwartet! (Ihre 404-Seite mit dem catch all wird angezeigt).

Sie müssen sie ändern, um den Unterpfad einschließen (debug):

{ Pfad: '/debug/', Komponente: DebugOne},

{ Pfad: '/debug/two', Komponente: DebugTwo},

{ Pfad: '*', Komponente: FourOhFour}

In diesem Fall können Sie auf die folgenden URLs zugreifen:

Hash-Modus

Im Hash-Modus ist es genau das Gegenteil. Sie müssen die Routen wie folgt verwenden:

{ Pfad: '/', Komponente: DebugOne},

{ Pfad: '/zwei', Komponente: DebugTwo},

{ Pfad: '*', Komponente: FourOhFour}

In diesem Fall können Sie auf die folgenden URLs zugreifen:

Geposted in Vue.js abgelegt unter , , , , ,