Der Standardmodus für vue-router ist der Hash-Modus. Er nutzt den URL-Hash, um eine komplette URL zu simulieren, damit die Seite nicht neu geladen wird, wenn sich die URL ändert.
Um ohne Hash zu arbeiten, nutzt man den Verlaufsmodus, welcher die history.pushState-API von HTML5 nutzt, um URL-Navigation ohne Reload zu erreichen:
constrouter=newVueRouter({mode: 'history',routes: [...]})Bei Nutzung des Verlaufsmodus sieht die URL "normal" aus, zB. http://meine-seite.de/benutzer/id - Wunderschön!
Es gibt jedoch ein Problem: Da unsere App eine so genannte "Single Page Application (SPA)" ist, die komplett im Browser läuft, erhält der Nutzer einen 404-Fehler, wenn er http://meine-seite.de/benutzer/id direkt aufruft - denn unter diesem Pfad wird dein Webserver nichts finden.
Aber keine Sorge: Um dieses Problem zu beheben, musst du nur eine einzige "catch-all"-Route in deiner Serverkonfiguration ergänzen. Wenn die URL zu keiner statischen Datei gehört, sollte diese Route immer die index.html an den Browser senden, in der deine App läuft ist.
<IfModulemod_rewrite.c> RewriteEngineOnRewriteBase / RewriteRule^index\.html$- [L] RewriteCond%{REQUEST_FILENAME}!-fRewriteCond%{REQUEST_FILENAME}!-dRewriteRule./index.html [L] </IfModule>location/ { try_files$uri$uri/ /index.html; }Für Node.js/Express benutz du am besten connect-history-api-fallback middleware.
Es gibt einen kleinen Nachteil: Der Server wird keine 404-Fehler mehr melden, da alle nicht gefundenen Pfade zur index.html führen. Um das zu beheben, solltest du eine Sammel-Route in der Vue-App für die 404-Seite definieren.
constrouter=newVueRouter({mode: 'history',routes: [{path: '*',component: NotFoundComponent}]})Alternativ kann man bei einem Node.js-Server den Fallback nutzen, indem man das serverseitige Router-System den 404-Fehler ausgeben lässt, sollte die URL auf keine Route treffen, die deine Vue-App kennt.
