I've attempted numerous methods to resolve this issue. I have tried using .htaccess in an Apache hosting environment (which is my preferred setup for hosting my site), Heroku, and Netlify with both a _redirects file and netlify.toml file. Unfortunately, none of these approaches have been successful. Vue suggests creating the .htaccess file like this:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
However, the issue persists where it reloads to the main index.html page instead of staying on the same page when reloaded. While I understand why this happens, as every page in a Single Page Application is essentially an index.html file, there should be a way to ensure consistent rendering when reloading.
In case it's relevant, here are some related details:
ENVIRONMENT
- VueJS 2
- Quasar 1.0
- Firebase
- Vue Router (included by default in VueJS)
QUASAR.CONF.JS
build: { vueRouterMode: "history" }
ROUTES.JS (basic structure)
import Layout from "layouts/Layout.vue";
import Home from "pages/Index.vue";
import About from "pages/About.vue";
import Contact from "pages/Contact.vue";
const routes = [
{
path: "/",
component: Layout,
children: [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/contact", component: Contact }
]
}
];
// Always leave this as last one
if (process.env.MODE !== "ssr") {
routes.push({
path: "*",
component: () => import("pages/Error404.vue")
});
}
export default routes;
If you require any additional information or code snippets, please let me know.
PROBLEM The initial page loads correctly, but upon reloading a page, it defaults back to the main index page (HOME). Even without the htaccess code, it displays a "Page not found" error rather than my custom 404 page. History mode eliminates the # from the URL, and switching to Hash mode does not solve the issue either.
Any assistance or insights on resolving this matter would be greatly appreciated.