HTML 5 Web History

[akhchan99]

I moved up from Vue 2 to Vue 3 recently, and trying to get the HTML 5 Web History working the same way as in Vue 2.

So I set the history mode using "createWebHistory", and everything seems fine, except when I click on the same link (ie. on dashboard, then I click on a side menu that go to dashboard again), on Vue 3 (vite), the whole page reload, but in Vue 2 (cli-serve), if I click on the same link, the page will not reload.

And if I use createWebHashHistory on Vue 3, the page also won't reload.

So am I missing some configuration some where?

[FlorentGashi]

I ran into the same issue when migrating to Vue 3 with createWebHistory. In Vue 2, clicking the same route doesn’t reload the page, but in Vue 3 (Vite), it does. Here are a few things to check:

Ensure the Base URL is Set Correctly

const router = createRouter({
  history: createWebHistory('/'),
  routes,
});

Check Server Config (Especially for History Mode)

If using Nginx, make sure you have:

location / {
    try_files $uri /index.html;
}

Confirm Link Behavior

• Are you using <router-link>?
• Try this.$router.push() and see if it still reloads.

The fact that createWebHashHistory works fine suggests it’s related to how Vite handles history mode. Let me know if this worked for you!