web-dev-qa-db-fra.com

Vue Router retourne 404 quand revisite à l'URL

Je viens d'activer le mode historique du routeur Vue. Et ça marche bien quand je visite vue routage via v-href ou href. Mais lorsque j'essaie d'actualiser cette page ou d'aller directement à partir de la barre d'adresse du navigateur, il renvoie simplement 404. Existe-t-il une option permettant d'accepter l'actualisation/la consultation de cette URL?

Voici la configuration de mon routeur Vue

var router = new VueRouter({
    hashbang: false,
    history: true,
    mode: 'html5',
    linkActiveClass: "active",
    root:  '/user'
});
vue.jsvue-router
9
Set Kyar Wa Lar

En actualisant la page, vous faites une demande au serveur avec l'URL actuelle et le serveur renvoie 404. Vous devez gérer cela sur votre infrastructure Web ou au niveau du serveur Web. 

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

14
zxzak

Je pense que vous manquez que SPA n'est pas rendu sur le serveur. Au moins pour la majorité. Ainsi, lorsque vous accédez à/quoi que ce soit, votre serveur Web ne le redirigera pas vers index.html. Cependant, si vous cliquez sur n’importe quel lien de routeur vuejs, cela fonctionnera car javascript est actif, mais pas du côté serveur.

Pour résoudre ce problème, utilisez .htaccess et redirigez toutes les requêtes vers index.html comme suit

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

J'espère que ça aide quelqu'un!

8
Tiago Matos

Si quelqu'un traite ce problème dans .NET Core en tant que backend de l'application, une approche agréable est un simple gestionnaire de secours dans le fichier Startup.cs de notre application .NET Core:

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"));
      });
    }
 }

Pour plus de détails: http://blog.manuelmejiajr.com/2017/10/letting-net-core-handle-client-routes.html

2
mejiamanuel57

Toute autre personne confrontée au même problème, je viens de me rendre compte que 

"book/:bookId/read"  // this will not work after page reload

et c'est différent

"/book/:bookId/read" // this is what works even after page reload

C’est bien sûr après avoir suivi ce que d’autres types ont suggéré plus haut encore: capturer tous les itinéraires du côté de votre serveur d’applications. En fait, je ne sais pas pourquoi cela a fonctionné, mais tous ceux qui ont des idées peuvent nous le faire savoir. 

0
john

Pour ceux qui voient cela en utilisant un backend Express, il existe le middleware connect-history-api-fallback qui est implémenté comme ceci 

const express = require('express');
const history = require('connect-history-api-fallback');

const app = express(); 
app.use(history({
  index: '/' //whatever your home/index path is default is /index.html
}));

Ou avec un nœud natif 

const http = require('http')
const fs = require('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

Les deux sont des suggestions dans la documentation . 

0
MPawlak