Vue 导航守卫如何在活动促销页面中根据时间戳拦截未开始或已结束的访问

作者：袖梨 2026-09-06

在活动促销页面中用导航守卫做时间拦截，核心是路由跳转前读取活动时间范围并比对当前时间，不满足则重定向或提示；需配置 startTime 和 endTime（时间戳或 ISO 字符串），并在 router.beforeEach 中统一校验，支持静态配置与动态接口获取两种方式。

在活动促销页面中用导航守卫做时间拦截，关键在于：路由跳转前读取活动时间范围，比对当前时间，不满足就重定向或提示。不需要额外请求接口，只要活动起止时间已配置（如路由 meta 或后端返回的静态数据），就能快速生效。

适合活动时间固定、上线前已知的场景。把 startTime 和 endTime 直接写进路由的 meta：

示例路由配置：

path: '/campaign/summer-sale',

component: SummerSale,

meta: {

requiresTimeCheck: true,

startTime: '2026-07-25T00:00:00',

endTime: '2026-08-10T23:59:59'

}

在 router.beforeEach 中统一处理所有带时间校验标记的路由：

先判断 to.meta.requiresTimeCheck 是否为真
用 new Date() 获取当前时间，转为毫秒数；再将 startTime/endTime 转为毫秒（new Date().getTime()）
若当前时间早于开始时间 → 重定向到「活动预告页」或首页，并可附带提示文案
若当前时间晚于结束时间 → 重定向到「活动结束页」或商品列表页
注意：必须保证 next() 只被调用一次，避免重复跳转报错

代码片段：

router.beforeEach((to, from, next) => {

if (to.meta.requiresTimeCheck) {

const now = Date.now();

const start = new Date(to.meta.startTime).getTime();

const end = new Date(to.meta.endTime).getTime();

if (now

next({ path: '/campaign/coming-soon', query: { activity: to.path } });

return;

}

if (now > end) {

next({ path: '/campaign/expired', query: { activity: to.path } });

return;

}

next();

});

如果活动时间由后端动态下发（比如运营后台随时调整），就不能硬编码在路由里。建议：

在守卫中先检查本地缓存（如 localStorage）是否有有效的时间配置，有则直接用
没有或过期时，发起轻量级请求（如 /api/campaign/config）获取最新时间，用 async/await + next(false) 暂停导航，等响应后再决定跳转
或提前在应用初始化时拉取并存入 Pinia store，守卫中直接读取 useCampaignStore().activePeriod
注意兜底逻辑：接口失败时，按“未开始”或“已结束”保守处理，避免白屏或误放行