title: Reloading same page in a Vue SPA site
body: <p>I've tried over a dozen ways to do this. <code>.htaccess</code> in an apache hosting (my preferred environment where I have my site hosted), Through heroku, through netlify with a <code>_redirects</code> file and <code>netlify.toml</code> file. And none of them seem to work. Vue recommends to write the <code>.htaccess</code> file like this:</p>
  
  <pre><code>&lt;IfModule mod_rewrite.c&gt;
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
  &lt;/IfModule&gt;
  </code></pre>
  
  <p>But it doesn't reload to the same page. It reloads to the main index.html page. Now, I get it why is doing that. In essence, every page in an SPA is an index.html. It's the components that make it look like a different page. However, this works in every SPA site I've seen. So there's gotta be a way for the render to remain consistent when I reload. </p>
  
  <p>In case it matters, here is some related code</p>
  
  <p>ENVIRONMENT</p>
  
  <ul>
  <li>VueJS 2</li>
  <li>Quasar 1.0</li>
  <li>Firebase</li>
  <li>Vuew router (out of the box in VueJS)</li>
  </ul>
  
  <p>QUASAR.CONF.JS</p>
  
  <pre><code>  build: { vueRouterMode: "history" }
  </code></pre>
  
  <p>ROUTES.JS (minimal)</p>
  
  <pre><code>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: () =&gt; import("pages/Error404.vue")
    });
  }
  
  export default routes;
  </code></pre>
  
  <p>If there is anything you need to see, let me know.</p>
  
  <p>PROBLEM
  The page loads fine, but when I reload a page, it loads the main page (HOME) which is the index page. Without the htaccess code it shows a Page not found (not even my own 404). History mode removes the # from the URL and putting it in Hash mode doesn't fix it either.</p>
  
  <p>Any help would be appreciated</p>