Vue url changes on navigation

Question

I am just getting started with Vue. I installed @Vue/Cli (that's version 3) and also cli-init so I can use version 2's commands. To create my project I used vue init webpack . While running the app on the browser I noticed strange behaviour; my routes are being changed!

Initial Route "localhost:8080/"

Navigating to the route url changes to "localhost:8080/#/"

Also with another route "localhost:8080/about"

Navigating to this route the url changes to "localhost:8080/about#/"

I don't understand what is going on. It renders the components though, but the url just changes. Here is my routes config:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
    {
      path: '/about',
      name: 'AboutComponent',
      component: AboutComponent,
    },
    {
      path: '*',
      name: '404',
      component: HelloWorld,
    },
  ],
});

No router links, I navigated by typing the paths. My router setting is default.

Show your router-links ant what mode you selected for router? History? — RomkaLTU

tato tato · Accepted Answer · 2018-09-24T21:24:51

You can probably answer the question yourself by reading vue-router documentation here (https://router.vuejs.org/guide/essentials/history-mode.html)

By default vue-router works in hash mode. Routes are changed in the browser with a 'hash' for compatibility with old browsers. Nowadays you can safely use history mode, and your URLs won't change in the browser location box.

However, I recommend that you read and fully understand how client-side routing works and what's the required server-side configuration you need to make your app work properly.

Welcome to Vue.JS!

Vue url changes on navigation

1 Answers