History Mode and Server Configurations

Currently, in your application, the URLs are prefixed with /#/ this is the default mode which is also known as “hash mode”. When in hash mode, Vue.js uses the /#/ to simulate a URL so the page won’t be reloaded when the URL changes. However, you can change this by enabling history mode. In history mode, Vue Router takes advantage of the ‘history.pushState` API to prevent the page from reloading.

To enable history mode, just add the mode attribute with a value of history to the VueRouter object.

router.js

export default new Router({
  mode: 'history', // Down here!
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

This removes the hash in the URL and makes the URL path look “normal” as desired. However, since it’s a singe page application, in history mode and without server configurations, navigating to a route will result in...