Vue Router zurück 404 bei der Rückkehr zur URL

Question

Ich nur Vue Router History-Modus aktivieren. Und es funktioniert gut, wenn ich vue Routing über v-href oder href besuche. Aber wenn ich versuche, diese Seite zu aktualisieren oder direkt aus der Adresszeile des Browsers zu gehen, gebe ich einfach 404 zurück. Gibt es eine Option, um das Aktualisieren/Wiederbesuchen dieser URL zu akzeptieren?

Das folgende ist mein Vue Router-Konfiguration

var router = new VueRouter({ 
    hashbang: false, 
    history: true, 
    mode: 'html5', 
    linkActiveClass: "active", 
    root: '/user' 
}); 

Answer 1

Durch das Aktualisieren der Seite, die Sie mit der aktuellen URL eine Anfrage an den Server machen und den Server zurückgibt 404. Sie haben dieses Framework auf Ihrem Web zu handhaben oder Webserver-Ebene.

https://router.vuejs.org/en/essentials/history-mode.html

Answer 2

Ich glaube, Sie fehlen, dass SPA ist nicht serverseitige Rendering. Zumindest für die Mehrheit. Wenn Sie auf irgendwas zugreifen, wird Ihr Webserver es nicht an index.html weiterleiten. Wenn Sie jedoch auf einen Vuejs-Router-Link klicken, funktioniert dies aufgrund der Tatsache, dass das JavaScript in Aktion trat, aber nicht auf der Serverseite.

Um dies zu lösen, verwenden Sie .htaccess und alle Anforderungen umleiten, wie so

<ifModule mod_rewrite.c> 
    RewriteEngine On 
    RewriteBase/
    RewriteRule ^index\.html$ - [L] 
    RewriteCond %{REQUEST_FILENAME} !-f 
    RewriteCond %{REQUEST_FILENAME} !-d 
    RewriteRule . /index.html [L] 
</ifModule> 

Hoffe, dass es jemand hilft index.html!

Answer 3

Wenn jemand mit diesem Thema in .NET Core als Backend des App handelt, ein netter Ansatz ist eine einfache Ersatzvorrichtung in dem Startup.cs unserer .NET-Core-Anwendung:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) 
{ 
     ....Your configuration 
     app.UseMvc(routes => 
     { 
     routes.MapRoute(
        name: "default", 
        template: "{controller=Home}/{action=Index}/{id?}"); 
     }); 
     //handle client side routes 
     app.Run(async (context) => 
     { 
     context.Response.ContentType = "text/html"; 
     await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html")); 
     }); 
    } 
} 

Für Weitere Details: http://blog.manuelmejiajr.com/2017/10/letting-net-core-handle-client-routes.html