如何无需为每个商品单独创建页面即可实现电商商品的可视化展示？

核心原理 #

通过动态路由规则复用同一个页面组件，仅根据商品ID拉取对应数据动态渲染，完全不需要为每个商品单独创建独立页面。

前端实现步骤 #

• 配置动态路由：无论使用Vue/React/Next/Nuxt等任意框架，都可配置通配符路由规则，例如/product/:productId，所有商品页都匹配该路由规则即可，无需逐个创建路由文件
• 封装通用商品展示组件：将商品图、价格、参数、详情介绍等展示模块统一封装为独立组件，仅接收productId作为入参，所有内容不写死固定值
• 动态拉取渲染数据：组件挂载时从路由参数中提取productId，调用商品详情接口获取对应数据，自动填充到组件对应位置即可完成渲染
• 小型静态项目适配：如果没有后端接口，可以提前把全量商品结构化数据存入productData.json文件，前端拿到ID后直接在本地JSON数组中筛选对应商品数据渲染即可
• 异常兜底：新增加载骨架屏、商品不存在404兜底逻辑，避免无效ID或接口报错时页面空白

后端配合要求 #

• 提供统一的商品详情查询接口，接收productId作为请求参数，返回对应商品的结构化数据即可
• 热门商品可新增缓存配置，降低接口响应耗时提升加载体验

可选优化项 #

• 需SEO的场景可配合SSR/SSG方案预渲染热门商品页面内容，同时通过路由元信息动态配置每个商品页的title、meta描述等头部标签，提升搜索引擎收录效果
• 如需增加数据可视化模块，可直接将接口返回的销量、评价等数值传入ECharts等图表组件，自动生成对应可视化图表，无需单独适配每个商品

内容的提问来源于stack exchange，提问作者Leafy