Sometimes, we want to fix Vue Router return 404 when revisit to the URL.

In this article, we’ll look at how to fix Vue Router return 404 when revisit to the URL.

How to fix Vue Router return 404 when revisit to the URL?

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.

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

We match all URLs with

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

And then we redirect all the URLs to index.html with

RewriteRule . /index.html [L]

Conclusion

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.