VueJS: Vue Router History

in VueJS Router

Looking at some of the examples we have of the Vue router you'll notice that the browser is automatically add a hash to the end of the URL.

This is the default behaviour for Vue router and it does this so that the browser will not try to reload the page when the URL changes. You can change this behaviour to use the History API added in HTML5 by adding a property to the VueRouter to make it use history mode instead.

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

When Vue Router is in this mode it will no longer add the hash to the URL and your URLs will look like any normal application.

You can see the difference in the router by having a look at the basic router example

Router Basic

Router History

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To Newsletter

Get weekly updates to your email