How to remove hash from URL in Vue.js

Vue router’s history mode and AWS Amplify

Image: pixabay.com

By default vue-router uses hash mode and most likely your URL’s looks similar to those ones:

• https://www.example.com/#
• https://www.example.com/#/contacts

To get rid of the hash, you can use the router’s history mode:

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

Now you can navigate through the app without seeing ugly ‘#’ in the URL. 🎉

But after the app’s deployment with AWS Amplify, you could feel frustrated and disappointed because most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request and this works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page.

To fix this issue you need to set redirects for your Single Page Web App.

Amplify console => App settings => Rewrites and redirects

Using regular expressions, the following example sets up a 200 rewrite for all files to index.html except for the specific file extensions specified in the regular expression.

Original address:

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Destination address: / or /index.html

Redirect type: 200

Screenshot:

Save it and you’re good to go! 🚀