vue 通过 vue router 实现真正的单页应用（spa）体验，无需刷新页面即可切换不同布局和内容；所有路由均由 javascript 动态控制，统一挂载在 `index.html` 的根节点上，无需多个 html 文件。
在 Vue CLI 创建的标准项目中，整个应用基于单一 HTML 入口文件（public/index.html），Vue 实例通过 createApp(App).mount('#app') 挂载到其中的
节点。这并非限制——恰恰相反，这是 SPA 架构的核心设计：所有“页面”都是组件，所有“跳转”都是路由驱动的视图切换。✅ 正确做法：用 Vue Router 管理多页面布局
你不需要、也不应该新建多个 HTML 文件（如 about.html、login.html）。那样会导致：
- 页面整页刷新，破坏 SPA 体验；
- Vue 实例重新初始化，状态丢失；
- 无法共享全局状态、指令、插件等。
取而代之的是：定义多个 .vue 组件（如 Home.vue、About.vue、AdminLayout.vue），并通过 Vue Router 配置路由规则，实现按需渲染：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
component: () => import('@/views/About.vue')
},
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'), // 全新布局
children: [
{ path: '', redirect: 'dashboard' },
{ path: 'dashboard', component: () => import('@/views/Dashboard.vue') }
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router此时，访问 /admin 会完整替换
中英文响应式企业网站是一款采用asp模式，后台功能实用，界面大气，导航无限级分类，单篇栏目添加等的企业网站源码，比较适合二次开发或者企业自用。功能介绍：【新闻文章管理】可以发布公司新闻和业内最新资讯，可增加多个一级栏目【英文信息管理】 可以发布英文网站的公司新闻和业内最新资讯，可增加多个一级栏目【导航管理】 包括首页等信息，都可以自由添加【英文导航管理】英文版的导航，包括首页等信息，都可以自由添加
立即学习“前端免费学习笔记（深入）”；
⚠️ 关键注意事项
- mount('#app') 始终只作用于 index.html：这是正确且必需的行为。Vue Router 通过操作 DOM 内部结构（而非替换整个 HTML 文档）实现“页面切换”，因此所有路由组件都运行在同一个 Vue 应用实例上下文中。
- 避免手动操作 document.body 或 location.href：这会绕过 Vue 的响应式系统和路由守卫，导致状态不一致。
- 布局复用推荐嵌套路由 + Layout 组件：例如 DefaultLayout.vue 包含公共 Header/Footer，BlankLayout.vue 用于登录页（无导航），通过 router-view 的 v-slot 或 meta 字段动态切换外层容器。
- 服务端需配置 fallback：若部署到静态服务器（如 Nginx），需确保所有前端路由均返回 index.html，否则直接访问 /about 会 404（参考官方部署指南）。
✅ 总结
Vue 的“多页面”本质是逻辑分页而非物理分页。借助 Vue Router，你可以：
- 任意切换完全不同结构的布局（全屏登录页、后台管理框架、移动端适配页等）；
- 复用状态、API 请求、Pinia store 和全局组件；
- 支持路由守卫、懒加载、滚动行为、过渡动画等高级能力。
从 index.html 出发，不是限制，而是统一入口的起点——这才是 Vue 被设计为现代前端框架的根本所在。
