Vue 3项目Vue Router路由不生效，始终停留在首页求助

1. 错误使用内存历史模式（核心原因） #

你当前用的createMemoryHistory是内存式路由历史，它不会修改浏览器地址栏的URL，也不会和浏览器历史栈交互，仅在内存中管理路由状态，通常用于SSR、测试或非浏览器环境。浏览器环境下必须用createWebHistory才能让路由同步更新URL。

修复路由配置：

// router/router.js
import { createWebHistory, createRouter } from "vue-router"; // 替换createMemoryHistory

// ... 其他导入和路由配置不变

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

export default router;

2. 冗余命名路由视图导致渲染混乱 #

你的App.vue中添加了<router-view name="admin" />，但路由配置里并没有定义命名视图。admin路由是嵌套在AdminLayout中的子路由，应该由AdminLayout内部的<router-view />渲染子组件，根App.vue只需保留一个全局路由视图即可，多余的命名视图会导致首页内容始终被渲染，无法被路由组件替换。

修复App.vue：

<template>
  <div id="app">
    <!-- 仅保留一个根路由视图，所有路由组件（包括AdminLayout）都在这里渲染 -->
    <router-view />
  </div>
</template>

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

同时确保AdminLayout.vue内部包含渲染子路由的视图：

<!-- AdminLayout.vue 示例结构 -->
<template>
  <div class="admin-layout">
    <!-- admin布局的侧边栏、顶部导航等元素 -->
    <aside>Admin Sidebar</aside>
    <main>
      <!-- 这里渲染/admin下的子路由组件（如AdminDashboard） -->
      <router-view />
    </main>
  </div>
</template>

3. 验证路由挂载逻辑 #

你的main.js路由挂载逻辑是正确的（先注册路由，等待路由就绪后再挂载应用），无需修改，确保没有其他代码干扰路由初始化即可。

测试验证 #

修改完成后重启项目：

• 访问/cars会显示CarsPage组件，地址栏URL同步更新
• 访问/admin会自动重定向到/admin/dashboard，地址栏显示对应URL，同时渲染AdminLayout嵌套AdminDashboard的结构

内容的提问来源于stack exchange，提问作者Suliman Noor