Vue Router does not update the path in the address bar

Question

I'm using "vue": "^3.4.21" and "vue-router": "^4.4.0"

main.ts

import { createMemoryHistory, createRouter } from 'vue-router'
# ...

const app = createApp(App)

const routes = [
  { path: '/', component: HomeView },
  { path: '/translate/category', component: TranslateCategoryView },
]
const router = createRouter({
  history: createMemoryHistory(),
  routes,
})
# ...
const app = createApp(App)
app.use(router)
app.mount('#app')

App.vue:

<template>
  <el-config-provider namespace="el">
    <LoginForm v-if="!appStore.isLoggedIn" />
    <template v-else>
      <BaseHeader />
      <div class="flex main-container">
        <BaseSide />
        <div w="full" py="4">
          <RouterView />
        </div>
      </div>
    </template>
  </el-config-provider>
</template>

Then I add this menu item in into BaseHeader component:

    <el-sub-menu index="5">
        <template #title>Translation</template>
        <el-menu-item index="5-1">          
          <RouterLink to="/translate/category">Categories</RouterLink>
        </el-menu-item>
    </el-sub-menu>

The menu item appears, and when I click on it, then TranslateCategoryView appears, and it is rendered. However, the URL in the address bar does not change (e.g. it remains at http://localhost:5173/)

There are no error messages in the console log, and no compilation warnings.

Why? What am I missing?

Answer 1

You are using createMemoryHistory mode for router, which will not interact with url and will not create the history for the application. You need to change the history to createWebHistory so that the url becomes interactive and then the routing history for the application will also be saved.

You can read more about this here: https://router.vuejs.org/guide/essentials/history-mode