VueJS: Erreur 404 après un refresh ou un retour en arrière ?

Il faut comprendre qu'une application VueJS SPA ne fait pas de Server Side Rendering (à l'inverse d'une app Laravel avec Blade par exemple). De ce fait, lorsque le client essaye d'accéder à n'importe quelle URL (par exemple /foobar), votre serveur web ne ferra pas de redirection sur la page index.html. (Pour simplifier: il ne trouve pas de fichier "foobar" sur votre serveur).

Mais, mes router-link fonctionnent pourtant...

Oui ! Lorsque vous cliquez sur un lien router-link, cela va fonctionner, car javascript s'occupera du rendu de la page, et non votre serveur.

Comment faire ?!

Tout simplement via votre fichier .htaccess en spécifiant que toutes les requêtes doivent être redirigées vers votre page index.html. Cela permettra ensuite à javascript de prendre le relai et d'afficher à vos utilisateurs la bonne page.

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