How to remove the # symbol from your Vue Router website url.

If you are building a Vue app, you may quickly notice that your app has a # symbol in your URLs.

This is there for the browser "to simulate a full URL so that the page won't be reloaded when the URL changes."

Normally though, you don't want your URLs to look like that. It just looks messy.

In order to quickly remove the # symbol from your URLs, within your index.js file where you create a new Vue Router instance, add the history mode setting to it.

This is what this looks like:

import Vue from 'vue'
import VueRouter from 'vue-router'

const router = new VueRouter({
  routes,
  mode: 'history' // Here is where you need to add the history setting mode.
})

export default router

Now, you are using the browser's history mode, and your links will utilize the history.pushState() API so that you won't have to do a full page load on new pages.

One caveat as the Vue Docs describe is that if a user accesses a page directly from a link, your server will show a 404 page, and that is not wanted!

To solve that, make sure your server is set up to send catch-all URLs to your Vue instance so that your users won't hit 404's.