Vue Router 不更新地址栏中的路径

Question

我正在使用

"vue": "^3.4.21"

和

"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')

应用程序.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>

然后我将此菜单项添加到

BaseHeader

组件中：

    <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>

菜单项出现，当我单击它时，

TranslateCategoryView

出现，并且它被渲染。但是，地址栏中的 URL 不会改变（例如，它仍然是

http://localhost:5173/

）

控制台日志中没有错误消息，也没有编译警告。

为什么？我错过了什么？

Answer 1

您正在使用路由器的

createMemoryHistory

模式，该模式不会与url交互，也不会为应用程序创建历史记录。 您需要将历史记录更改为

createWebHistory

，以便 url 变为交互式，然后应用程序的路由历史记录也将被保存。

您可以在这里阅读更多相关信息：https://router.vuejs.org/guide/essentials/history-mode