摘要：本文介绍了一个基于 SPA（单页应用）架构的前端项目实践。该项目通过动态路由懒加载和本地状态持久化技术，实现了在“技术文档阅读”与“轻量级娱乐模块（小说、小游戏）”之间的无缝切换。适合前端初学者学习组件化设计、Router 配置及 LocalStorage 数据管理。文末附在线体验地址。

一、 项目背景与需求分析

在日常开发中，频繁切换窗口不仅打断心流，还容易暴露隐私。为了解决这个问题，我设计并开发了一个聚合型前端 Dashboard。

核心需求：

1. 视觉伪装：默认界面需呈现为专业的技术博客或文档中心，符合办公场景。
2. 模块化扩展：支持动态加载不同的功能模块（阅读器、Canvas 游戏、互动宠物）。
3. 状态持久化：刷新页面后，阅读进度、游戏存档不丢失。
4. 极速切换：模块间切换无刷新，体验丝滑。

二、 技术栈选型

• 核心框架：Vue.js 3 / React 18 (根据实际选择)
• 路由管理：Vue-Router / React-Router (Hash 模式，便于部署)
• 状态管理：Pinia / Redux Toolkit
• 存储方案：LocalStorage + IndexedDB (用于大文件缓存)
• UI 库：Element Plus / Ant Design (用于伪装层的表格和列表)

三、 核心功能实现

1. 动态路由与懒加载 (Lazy Loading)

为了实现“按需加载”，我们使用了 Webpack/Vite 的动态 import 语法。只有当用户点击特定模块时，才加载对应的 JS Chunk。

点击前来看看吧：https://www.duanwuqiufenmao.top/?code=REF36693_c733a4dc

javascript

// router/index.js

示例

const routes = [{
	path: '/',
	component: () = >import('@/views/FakeBlog.vue'),
	// 默认伪装层
	meta: {
		title: '技术文档中心'
	}
},
{
	path: '/module/novel',
	component: () = >import('@/views/NovelReader.vue'),
	// 小说模块 
	meta: {
		requiresAuth: true,
		title: '文档详情'
	} // 伪装标题 }, 
	{
		path: '/module/farm',
		component: () = >import('@/views/FarmGame.vue'),
		// 农场模块 meta: { requiresAuth: true, title: '算法可视化演示' } // 伪装标题 } ];
		

2. “伪装”逻辑实现

通过全局前置守卫 beforeEach，我们可以根据 URL 参数或内部状态，动态修改 document.title 和页面头部信息，使其看起来更像是一个正经的学习网站。

javascript

router.beforeEach((to, from, next) => { 
    if (to.meta.title) { 
        document.title = to.meta.title; 
        // 例如显示 "MySQL 索引原理 - 技术博客" 
} next(); });