How to remove hasbang from url in vue js

I want to remove hashbang from url in vue js i am trying mode:'history', hashbang:false, history:true, linkActiveClass: "active", but still getting hash in url


#1 Answers

When initialising your Vue router, this is the bare minimum code to make it work:

const router = new Router({
  mode: 'history'
})

You'd then need to pass the router instance (router here) to your Vue instance on creation:

new Vue({
  el: '#app',
  components: { App },
  template: `<App/>`,
  router
})

With just this setup, vue-router should already work in history mode. However, most likely you'll also want to add routes to your router instance:

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

If you could share some code, then it would go a long way in letting us help you further.

For now, you can also check a small router example (notice how the route in the browser URL changes to /foo and then to /bar, without a hash).


#2 Answers

if you're using Vue v3 and vue-router v4 this line in router.js helped me to remove the hashtag from the url:

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

Comments