Vue 3 路由器更改 <routing-view/> 但 URL 未更改

Question

我的 vue 项目中的路由出现问题，vue-router 正在

<router-view />

中工作，但没有更改 URL。

这是我的 main.js 的样子：

import { createApp } from "vue";
import { createMemoryHistory, createRouter } from "vue-router";
import App from "./App.vue";
import EditComponent from "./components/EditComponent/EditComponent.vue";
import LoginComponent from "./components/LoginComponent/LoginComponent.vue";

import "./styles/main.scss";

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: "/", name: "Login", component: LoginComponent },
    { path: "/edit", name: "Edit", component: EditComponent },
  ],
});

createApp(App).use(router).mount("#app");

应用程序.vue

<template>
  <router-link to="/">Login</router-link>
  <router-link to="/edit">Edit</router-link>
  <router-view />
</template>

如果我按任意

<router-link>

，它会显示相应的组件，但不会更改 URL。如果我转到

http://localhost:5173/edit

，它会错误地显示

Login

组件。本质上，URL 对路由不起作用，但路由器本身起作用。

就上下文而言，这个 Vue 项目是用 Vite 制作的，位于 git 存储库的

frontend

文件夹中（我在

backend

中有一个 node.js 服务器）。另外，我将组件分成文件夹的原因是因为我更喜欢将脚本与

<template>

分开

我没有收到任何控制台错误。我看了很多 Vue 路由教程，看看是否有我遗漏的东西，但我找不到任何问题。我也没找到类似的情况。

Answer 1

您面临的问题是因为您在 main.js 中创建路由器实例时使用了 createMemoryHistory() 。

在Vue Router中，createMemoryHistory()是一个基于内存的历史记录实现，它不与浏览器中的URL交互。这主要用于 SSR（服务器端渲染）和测试。

要解决此问题，您需要使用 createWebHistory() 而不是 createMemoryHistory()。 createWebHistory() 函数创建一个与 URL 交互的路由器实例。这是更新后的代码：

import { createApp } from "vue";
import { createWebHistory, createRouter } from "vue-router";
import App from "./App.vue";
import EditComponent from "./components/EditComponent/EditComponent.vue";
import LoginComponent from "./components/LoginComponent/LoginComponent.vue";

import "./styles/main.scss";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", name: "Login", component: LoginComponent },
    { path: "/edit", name: "Edit", component: EditComponent },
  ],
});

createApp(App).use(router).mount("#app");

进行此更改后，您应该会看到 URL 在路由之间导航时发生变化。