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
– RomkaLTU, Commented Sep 24, 2018 at 21:07

tato · Accepted Answer · 2018-09-24 21:24:51Z

1

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!

answered Sep 24, 2018 at 21:24

tato

5,5995 gold badges33 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LeanKhan Over a year ago

Oh, will do. Thank you. Quite different from my Angular6 experience.

LeanKhan Over a year ago

Using history mode solved the problem. Thank you, again.

Collectives™ on Stack Overflow

Vue url changes on navigation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related