vue 通过 vue router 实现真正的单页应用（spa），无需刷新或切换 html 文件即可动态切换不同布局的“页面”，所有视图均在 index.html 内按需渲染，保持 vue 实例统一、状态可控、体验流畅。
在 Vue 应用中，“多个页面”并非指多个独立的 HTML 文件（如 page1.html、page2.html），而是指逻辑上分离、视觉上迥异的视图组件，它们共享同一个入口文件 index.html 和同一个 Vue 根实例。Vue 的设计哲学正是围绕单页应用（SPA） 展开：整个应用只加载一次 HTML，后续所有页面跳转均由 JavaScript 控制，DOM 更新局部化、路由状态可维护、用户体验接近原生应用。
要实现“彻底更换页面布局”（例如登录页全屏居中、后台管理页带侧边栏+顶部导航、内容页极简无边框），你不需要新建 HTML 文件，也不应手动清空 #app 并重新挂载 Vue 实例——这会破坏响应式系统、丢失状态、绕过 Vue 生态（如 Pinia、Router 导航守卫等）。
✅ 正确做法是：使用 Vue Router 配置多条路由，每条路由映射一个独立的布局组件（Layout）或完整页面组件（Page），并通过 <router-view> 动态渲染：
<!-- src/App.vue --> <template> <router-view /> <!-- 所有路由匹配的组件在此处渲染 --> </template>
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('@/layouts/DefaultLayout.vue') // 公共布局（含 header + sidebar）
},
{
path: '/login',
component: () => import('@/layouts/BlankLayout.vue') // 全屏空白布局（仅含 login 表单）
},
{
path: '/about',
component: () => import('@/pages/AboutPage.vue') // 独立页面，可复用任意布局
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router<!-- src/layouts/BlankLayout.vue -->
<template>
<div class="blank-layout">
<slot /> <!-- 路由匹配的子组件（如 LoginView）将注入此处 -->
</div>
</template>
<style scoped>
.blank-layout {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
}
</style>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 永远不要新建多个 HTML 入口文件：index.html 是唯一入口，mount('#app') 只作用于该文件内的 DOM；其他 HTML 文件无法自动启用 Vue，且会中断 SPA 的路由历史和状态管理。
- 避免手动操作 document.body.innerHTML 或重复 createApp().mount()：这会导致 Vue 实例冲突、事件监听器泄漏、响应式失效。
- 布局复用优于复制：通过嵌套路由 + 布局组件 + <router-view> 插槽，可灵活组合（如 DefaultLayout 包裹 <router-view>，其内部再嵌套子路由），大幅提升可维护性。
- 服务端需配置 fallback：若使用 history 模式（推荐），确保后端对所有非 API 路径返回 index.html，否则直接访问 /dashboard 会 404。
总结：Vue 的“页面”本质是组件级视图抽象，Vue Router 是实现这一范式的官方标准方案。它让你以声明式方式定义 URL 到组件的映射，自动处理 DOM 替换、滚动行为、路由守卫与数据获取，真正实现“一套代码、多种布局、无缝导航”。
