VueJS routing automatically sets a '#' in url

Question

I have been following the official VueJS router documentation on their website: . The Problem that I am now facing is, that it automatically redirects me to the url: http://127.0.0.1:8080/#/, although I enter the URL: http://127.0.0.1:8080/.

The same appears when I'm clicking on a button, that sets a new URI for me, like so: http://127.0.0.1:8080/#/foo. This happens when I press the button, that should get me there.

If I open the URL: http://127.0.0.1:8080/foo it automatically rewrites my URL to http://127.0.0.1:8080/foo#/.

Everything else still works, and the router-view is being rendered, but it surely would be nice for a user to experience the site without the annoying # in it's way.

I did follow the VueJS documentation, as stated before, but I changed some things a little. These however don't affect the error.

Here's my main.js file.

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import AnotherComponent from './components/AnotherComponent.vue';

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

const routes = [
    { path: '/foo', component: AnotherComponent }
];

const router = new VueRouter({
    routes
});

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

Here's my App.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />

        <router-view></router-view>
        <router-link to="/foo">Go to Foo</router-link>
        <hello-world msg="test123" />

    </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
    name: "app",
    components: {
        HelloWorld
    }
};
</script>

Answer 1

You should use history mode to avoid the hash sign :

 const router = new VueRouter({
   mode:'history',
   routes
  });