Vue 路由器不反映路由，停留在主页上

Question

我正在开发一个 Vue 3 项目，遇到了 Vue 路由器未反映正确路由的问题。当我导航到任何路线（例如 /cars 或 /admin）时，URL 不会更新，应用程序仍保留在主页上。

import { createMemoryHistory, createRouter } from "vue-router";

import HomePage from "../views/website/index.vue";
import CarsPage from "../views/website/CarsPage.vue";
import AdminLayout from "../components/admin/AdminLayout.vue";
import AdminDashboard from "../views/admin/index.vue"; // Assuming AdminDashboard is exported as default

const routes = [
  {
    path: "/",
    name: "home",
    component: HomePage,
  },
  {
    path: "/cars",
    name: "cars",
    component: CarsPage,
  },
  {
    path: "/admin", // Make sure to add '/admin' as a separate route
    component: AdminLayout,
    children: [
      {
        path: "", // Making '/admin' itself redirect to '/admin/dashboard'
        redirect: "dashboard",
      },
      {
        path: "dashboard",
        name: "admin-dashboard",
        component: AdminDashboard,
        meta: { requiresAuth: true },
      },
      // Add more admin routes here if needed
    ],
  },
];

const router = createRouter({
  history: createMemoryHistory(),
  routes,
});

export default router;

这就是我在 main.js 中加载它的方式：

import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";

import router from "./router/router";
const app = createApp(App);
app.use(Antd);

app.use(router);
router.isReady().then(() => {
  console.log("helllo");
  app.mount("#app");
});

不知何故，当我进入/admin时，它没有反映并停留在主页

<template>
  <div id="app">
    <!-- Header for website pages -->
    <header>
      <!-- Include website-specific header content here -->
    </header>

    <!-- Router view for website pages -->
    <router-view />
    <!-- {{ $route }} -->

    <!-- Footer for website pages -->
    <footer>
      <!-- Include website-specific footer content here -->
    </footer>

    <!-- Router view for admin pages -->
    <router-view name="admin" />
  </div>
</template>

<script>
import Footer from "./components/Footer.vue";
import Header from "./components/Header.vue";
export default {
  name: "App",
  components: { Header, Footer },
  created() {
    this.$router.push("/admin/dashboard");
  },
};
</script>

当我尝试导航到 /admin 或 /cars 等任何路线时，URL 不会更改，应用程序仍保留在主页上。当我尝试导航时，控制台输出显示以下路线信息：

Answer 1

该问题与使用 createMemoryHistory 而不是 createWebHistory 有关。 createMemoryHistory 通常用于服务器端渲染或测试，而 createWebHistory 用于典型 Web 应用程序中的客户端导航。