在活动促销页面中用导航守卫做时间拦截，核心是路由跳转前读取活动时间范围并比对当前时间，不满足则重定向或提示；需配置 starttime 和 endtime（时间戳或 iso 字符串），并在 router.beforeeach 中统一校验，支持静态配置与动态接口获取两种方式。
在活动促销页面中用导航守卫做时间拦截，核心是：**路由跳转前读取活动时间范围，比对当前时间，不满足就重定向或提示**。不需要额外请求接口，只要活动起止时间已配置（如路由 meta 或后端返回的静态数据），就能快速生效。
在路由配置里写死活动时间区间
适合活动时间固定、上线前已知的场景。把 startTime 和 endTime 直接写进路由的 meta：
-
startTime和endTime用标准时间戳（毫秒）或 ISO 字符串（如"2026-07-25T00:00:00"） - 确保时间值为服务器时间或已做时区对齐（推荐用 UTC 时间 + 前端
new Date()对比，避免用户本地时间偏差过大）
示例路由配置：
{<br> path: '/campaign/summer-sale',<br> component: SummerSale,<br> meta: {<br> requiresTimeCheck: true,<br> startTime: '2026-07-25T00:00:00',<br> endTime: '2026-08-10T23:59:59'<br> }<br>}
全局前置守卫中做时间校验
在 router.beforeEach 中统一处理所有带时间校验标记的路由：
- 先判断
to.meta.requiresTimeCheck是否为真 - 用
new Date()获取当前时间，转为毫秒数；再将startTime/endTime转为毫秒（new Date().getTime()） - 若当前时间早于开始时间 → 重定向到「活动预告页」或首页，并可附带提示文案
- 若当前时间晚于结束时间 → 重定向到「活动结束页」或商品列表页
- 注意：必须保证
next()只被调用一次，避免重复跳转报错
代码片段：
router.beforeEach((to, from, next) => {<br> if (to.meta.requiresTimeCheck) {<br> const now = Date.now();<br> const start = new Date(to.meta.startTime).getTime();<br> const end = new Date(to.meta.endTime).getTime();<br><br> if (now next({ path: '/campaign/coming-soon', query: { activity: to.path } });<br> return;<br> }<br> if (now > end) {<br> next({ path: '/campaign/expired', query: { activity: to.path } });<br> return;<br> }<br> }<br> next();<br>});
需要动态时间？配合接口或 Vuex/Pinia 状态
如果活动时间由后端动态下发（比如运营后台随时调整），就不能硬编码在路由里。建议：
- 在守卫中先检查本地缓存（如 localStorage）是否有有效的时间配置，有则直接用
- 没有或过期时，发起轻量级请求（如
/api/campaign/config）获取最新时间，用async/await+next(false)暂停导航，等响应后再决定跳转 - 或提前在应用初始化时拉取并存入 Pinia store，守卫中直接读取
useCampaignStore().activePeriod - 注意兜底逻辑：接口失败时，按“未开始”或“已结束”保守处理，避免白屏或误放行
用户体验细节不能漏
单纯跳走不够友好，建议补充：
- 跳转目标页（如 /coming-soon）里显示倒计时，提升期待感
- 已结束页提供“查看往期活动”或“订阅下次通知”的入口
- 开发阶段加个临时开关（如 URL 参数
?debug-time=2026-08-01），方便模拟不同时间段测试 - 服务端也应同步校验时间，前端拦截只是体验优化，不可替代后端权限控制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
