Refresh browser problem with Vue.js

This issue is likely occurring because the Vue Router is not properly configured to handle browser refreshes on routes other than the root route (“/”). To fix this, you need to configure your server to redirect all requests to your index.html file, which will then load your Vue application and handle the routing.

Here’s how you can configure your server to redirect all requests to index.html:

If you are using Apache, you can create an .htaccess file in the root directory of your project with the following content:

# Serve index.html for any requests that don't match a file or directory
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  
  # If the request is for a real file or directory, serve it
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  
  # Otherwise, rewrite the URL to point to the index.html file
  RewriteRule ^ - [L]
  
  # All other requests go to index.html
  RewriteRule ^ index.html [L]
</IfModule>

If you are using Nginx, you can add the following configuration to your server block:

location / {
    try_files $uri $uri/ /index.html;
}

Make sure to restart your server after making these changes.

This configuration will redirect all requests to your index.html file, allowing your Vue application to handle the routing correctly.

Reference:

• Refresh browser problem with VueJS