Vue-router HTML5 History Mode (transferred from official website) __html

Vue-router default hash mode-uses the hash of the URL to simulate a complete URL, so the page will not reload when the URL changes.

If you do not want ugly hash, we can use the history mode of routing, this pattern takes full advantage of the history.pushstate API to complete the URL jump instead of reloading the page.

Const ROUTER = new Vuerouter ({
  mode: ' History ',
  routes: [...]
})

When you use the history mode, the URL is like a normal URL, such as http://yoursite.com/user/id, it looks good.

But this mode needs to play well, also need the background configuration support. Because our application is a single page client application, if the background does not have the correct configuration, when the user in the browser directly access http://oursite.com/user/id will return 404, this is not good to see.

So, you're going to add a candidate to cover all the situations on the server: if the URL doesn't match any static resources, you should return to the same index.html page, which is your app-dependent page.
Back-end Configuration Example Apache

<ifmodule mod_rewrite.c>
  rewriteengine on
  rewritebase/
  rewriterule ^index\.html$-[L]
  Rewritecond%{request_filename}!-f
  rewritecond%{request_filename}!-d rewriterule
  ./index.html [L]
</IfModule>

Nginx

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

node.js (Express)Https://github.com/bripkens/connect-history-api-fallback WarningGive a warning, because after doing so, your server will no longer return the 404 error pages, because the index.html file will be returned for all paths. To avoid this, you should cover all routing situations in the Vue application, and then give a 404 page.

Const ROUTER = new Vuerouter ({
  mode: ' History ',
  routes: [
    {path: ' * ', component:notfoundcomponent}
  
   ]
})
  

Alternatively, if you are using Node.js as the background, you can use the server end of the road to match the URL, when there is no match to the route return 404, so as to achieve fallback.