Vue webpack is adding #/ to all URLs

Question

I am following along with some Vue projects using vue init webpack test, but it seems like when running npm run dev, there is always a #/ appended to all urls.

This is also true for when I create a new component and route to it. If i do something like http://localhost:8080/newpath, it becomes http://localhost:8080/newpath#/.

Is there a config variable I can set so that the #/ is not appended to every URL? Using regex to remove it on every URL seems really unwieldily.

I am not including any actual source code because this is from the HelloWorld app that vue init creates.

I am using the latest versions for vue cli 3.

Answer 1

From the docs on HTML5 History Mode:

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes.

So you need to change your Vue router to use the HTML5 history mode:

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

Please also continue reading the docs beyond that because you will need to adjust your actual server configuration to support this mode so that users will be sent to the appropriate location if they copy and paste the address bar URL to a new tab.