How to remove # from vuejs root router?

Question

When I go to http://localhost:8080/ It redirects to http://localhost:8080/#/

Why it added "#" ?

import Vue from 'vue'
import App from './App.vue'    
import VueRouter from 'vue-router'
import List from './components/list'
import PostForm from './components/postform'

Vue.config.productionTip = false
Vue.use(VueRouter)             

const routes = [               
  { path: '/', component: List, name: 'root' },
  { path: '/posts/new', component: PostForm }
]     

const router = new VueRouter({ 
  routes
})  

new Vue({
  router,
  render: h => h(App),         
}).$mount('#app')

This explains the differences in routing modes: https://router.vuejs.org/guide/essentials/history-mode.html — Brian Lee, Apr 10 '20 at 15:34

score 3 · Accepted Answer · answered Apr 10 '20 at 16:02

By default VueRouter uses hash mode.

You can change the mode to history if you want:

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

Probably the main reason for doing this is that, if you use history mode you need to have a special setup for your web server to handle the urls properly. When using hash bangs it works out of the box.

How to remove # from vuejs root router?

1 Answers1