vue 默认以单页应用（spa）模式运行，通过 vue router 实现页面级布局切换，无需刷新或跳转 html 文件；所有视图均在 index.html 内动态挂载，保持 vue 实例统一性和状态连贯性。
在 Vue CLI 创建的标准项目中，整个应用仅依赖一个 index.html 作为唯一入口文件，Vue 实例通过 createApp(App).mount('#app') 挂载到该 HTML 中的 <div id="app"></div> 容器内。这意味着：你不需要、也不应该创建多个 HTML 页面来模拟“多页”效果——这不仅违背 Vue 的设计哲学，还会导致 Vue 实例重复初始化、状态丢失、路由不可控等问题。
真正实现“彻底更换页面布局”的正确方式是使用 Vue Router（Vue 官方路由库）。它基于浏览器 History API，在不重新加载 HTML 的前提下，动态替换 <router-view> 插槽中的组件，并支持独立的布局模板、路由守卫、嵌套路由和滚动行为控制。
例如，你可以定义两个差异极大的布局：
<!-- layouts/DefaultLayout.vue --> <template> <header>通用导航栏</header> <main><slot /></main> <footer>底部信息</footer> </template>
<!-- layouts/BlankLayout.vue --> <template> <!-- 全屏无边框布局，适合登录页或错误页 --> <div class="full-viewport"><slot /></div> </template>
再在路由配置中按需分配：
立即学习“前端免费学习笔记（深入）”；
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import DefaultLayout from '@/layouts/DefaultLayout.vue'
import BlankLayout from '@/layouts/BlankLayout.vue'
import HomePage from '@/views/HomePage.vue'
import LoginPage from '@/views/LoginPage.vue'
const routes = [
{
path: '/',
component: DefaultLayout,
children: [{ path: '', component: HomePage }]
},
{
path: '/login',
component: BlankLayout,
children: [{ path: '', component: LoginPage }]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})并在 App.vue 中声明路由出口：
<template> <router-view /> </template>
✅ 关键要点总结：
- Vue 只有一个 HTML 入口（index.html），所有页面逻辑均在 Vue 组件内组织；
- mount('#app') 始终作用于 index.html，但 router-view 会响应 URL 变化，动态渲染对应组件；
- 不同布局 = 不同 Layout 组件 + 路由级组件嵌套，而非多个 HTML 文件；
- 若强行引入第二个 HTML（如 login.html），将脱离 Vue 应用上下文，无法访问响应式数据、Pinia 状态或路由实例，属于反模式。
因此，掌握 Vue Router 是构建专业 Vue 应用的必经之路——它不是可选项，而是 Vue SPA 架构的核心支柱。
