这是一个系列 Blog作者将以一个 PHP 全栈工程师的身份利用 AI 工具claude code、codex、deepseek、豆包等从零开始学习 golang 语言并最终完成 ai-go-mallgithub | gitee开源项目的制作全程记录分享。在上一期我们已经完成 “前端状态商店、多语言初始化”本期将完成前端路由初始化前端路由初始化vue 里边实现路由使用 vue-router核心部分大概只需要以下三行代码constroutercreateRouter({history:createWebHashHistory(),routes:staticRoutes,})如上路由本身很简单麻烦的地方在于建立第一个路由时一般需要同时配置好静态路由的自动发现、首屏 loading、路由切换进度条静态路由的自动发现路由功能规划有一些预设好的静态路由比如首页、登录页、404页全部定义于//router/static.ts对应的组件在合理位置建立空白 vue 组件即可系统能自动加载//router/static文件夹内的所有 ts 路由定义文件自动合并到预设静态路由数组中最终完成所有静态路由注册创建路由实例的逻辑写在//router/index.ts文件中并于mian.ts完成路由插件注册直接将规划发给 cc基本一次性实现了所有需求但还是人工整理了一下因为写提示词还不如自己改的小细节最终核心代码如下// src\router\static.ts/* * 静态路由支持自动扩展 * 系统会自动加载 ./static 目录及其子目录中的所有 .ts 文件 * 每个模块的 default 导出可以是 RouteRecordRaw 或 RouteRecordRaw[]自动 push 到以下 staticRoutes 数组 */conststaticRoutes:ArrayRouteRecordRaw[{path:/,name:/,component:()import(//views/index.vue),meta:{title:pageTitles.Home,},},// ...登录页404 等其他静态路由]// 静态路由自动扩展逻辑conststaticFilesimport.meta.glob(./static/**/*.ts,{eager:true})for(constpathinstaticFiles){constmodulestaticFiles[path]asanyif(!module.default){console.warn([Router] Static route module${path}does not export default, skipped)continue}constroutemodule.defaultasRouteRecordRaw|RouteRecordRaw[]if(Array.isArray(route)){staticRoutes.push(...route)}else{staticRoutes.push(route)}}exportdefaultstaticRoutes创建src\router\static\adminBase.ts测试静态路由自动扩展功能// src\router\static\adminBase.tsimporttype{RouteRecordRaw}fromvue-router/** * 后台基础路由路径 */exportconstadminBaseRoutePath/admin/* * 后台基础静态路由 */constadminBaseRoute:RouteRecordRaw{path:adminBaseRoutePath,name:admin,component:()import(//layouts/admin/index.vue),// 直接重定向到 loading 路由redirect:adminBaseRoutePath/loading,meta:{title:pageTitles.Loading,},children:[{path:loading/:to?,name:adminMainLoading,component:()import(//layouts/common/loading.vue),meta:{title:pageTitles.Loading,},},],}exportdefaultadminBaseRoutesrc\router\static\adminBase.ts的default导出adminBaseRoute会自动 push 到staticRoutes数组然后通过src\router\index.ts的createRouter创建路由实例时完成注册。静态路由涉及的 vue 文件如//layouts/admin/index.vue、//views/index.vue等都已经由 cc 创建完毕里边填充了空白 vue 组件的代码等待后续完善。路由切换进度条单页应用加载完毕之后后续切换页面就不会刷新了没有加载页面的过程浏览器就不会显示自带的进度条或其他 loading 态所以需要开发者自己写一个进度条此进度条不代表真实的网页资源下载进度且路由切换往往很快所以只需要在路由加载前显示路由加载后隐藏即可我们选择使用nprogress实现路由切换进度条它会在网页顶端显示一个从左到右的蓝色加载条// src\router\index.ts 文件即 createRouter 的文件importNProgressfromnprogressimportnprogress/nprogress.cssimport{createRouter,createWebHashHistory}fromvue-routerimportstaticRoutesfrom//router/staticconstroutercreateRouter({history:createWebHashHistory(),routes:staticRoutes,})// 路由加载前router.beforeEach((){// 显示进度条NProgress.configure({showSpinner:false})NProgress.start()})// 路由加载后router.afterEach((){// 隐藏进度条NProgress.done()})exportdefaultrouter首屏 loadingvue 单页应用首次加载可能会很慢我们需要尽快显示一个 loading 动画避免长时间白屏而且系统首次加载完毕后再不显示此 loading 动画路由切换不显示。loading 的显示只需要放到 vue-router 的路由加载前钩子中即可整个系统的第一个路由加载前就能触发到 loading 的显示loading 的实现则直接使用原生 js 创建 div 即可就不要加载 vue 组件什么的了。另外一个核心点在于首次加载完毕loading 不会重复触发所以需要一个标记此标记的最佳实践是挂载到 window 对象上先声明全局类型定义// common.d.ts 文件interfaceWindow{loading:boolean}更新src\router\index.ts触发首屏 loading 显示importNProgressfromnprogressimportnprogress/nprogress.cssimport{createRouter,createWebHashHistory}fromvue-routerimportstaticRoutesfrom//router/staticimport{loading}from//utils/loadingconstroutercreateRouter({history:createWebHashHistory(),routes:staticRoutes,})// 路由加载前router.beforeEach((){NProgress.configure({showSpinner:false})NProgress.start()// 显示首屏 loadingif(!window.loading){loading.show()window.loadingtrue}})// 路由加载后router.afterEach((){// 隐藏首屏 loading只要不标记 window.loading 为 false它就永远不会再触发了if(window.loading){loading.hide()}NProgress.done()})exportdefaultrouter直接使用原生 js 创建 loading 的 div挂载到 body 节点下// src\utils\loading.ts 文件import{nextTick}fromvueimport//styles/loading.scssexportconstloading{show:(){constdivdocument.createElement(div)div.classNameai-go-page-loadingdiv.innerHTMLdiv classcontainer div classmain div classitem/div div classitem/div div classitem/div div classitem/div div classitem/div div classitem/div div classitem/div div classitem/div div classitem/div /div /divdocument.body.insertBefore(div,document.body.childNodes[0])},hide:(){nextTick((){setTimeout((){consteldocument.querySelector(.ai-go-page-loading)elel.parentNode?.removeChild(el)},1000)})},}// src\styles\loading.scss 文件 .ai-go-page-loading { width: 100%; height: 100%; position: fixed; z-index: 2147483600; background-color: #f5f5f5; .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); .main { width: 80px; height: 80px; .item { width: 33.333333%; height: 33.333333%; background: #409eff; float: left; animation: ai-go-page-loading-animation 1.2s infinite ease; border-radius: 1px; } .item:nth-child(7) { animation-delay: 0s; } .item:nth-child(4), .item:nth-child(8) { animation-delay: 0.1s; } .item:nth-child(1), .item:nth-child(5), .item:nth-child(9) { animation-delay: 0.2s; } .item:nth-child(2), .item:nth-child(6) { animation-delay: 0.3s; } .item:nth-child(3) { animation-delay: 0.4s; } } } } keyframes ai-go-page-loading-animation { 0%, 70%, 100% { transform: scale3D(1, 1, 1); } 35% { transform: scale3D(0, 0, 1); } }
)
