Vue导航守卫可通过全局前置守卫拦截未同意协议用户：检查目标路由meta.requiresAgreement为true且localStorage中agreementAccepted非'true'时，强制跳转协议页；协议页提交后存状态并重定向原路径。

Vue 导航守卫可以配合用户协议勾选状态，实现对未同意协议用户的访问拦截——核心思路是：在全局前置守卫中检查用户是否已明确勾选并保存协议同意状态，若未满足，则强制跳转至协议页，且禁止进入任何受保护路由（包括首页、仪表盘等）。

协议状态需持久化存储

用户勾选“我已阅读并同意”后，必须将同意状态可靠存入本地（如 localStorage）或状态管理（如 Pinia/Vuex），不能仅靠内存变量。否则刷新页面即丢失，导致重复拦截失效。

• 推荐写法：localStorage.setItem('agreementAccepted', 'true')
• 读取时注意类型：localStorage.getItem('agreementAccepted') === 'true'
• 若使用 Pinia，应在 store 中定义 agreementAccepted 并同步 localStorage，确保跨组件/刷新一致

路由配置中标记需协议的页面

不是所有页面都需协议拦截，但关键入口（如首页、工作台、个人中心）应统一标记。建议用 meta.requiresAgreement 控制，避免硬编码路径。

• 示例路由配置：

{ path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { requiresAgreement: true } }, { path: '/profile', name: 'Profile', component: () => import('@/views/Profile.vue'), meta: { requiresAgreement: true } }, { path: '/agreement', name: 'Agreement', component: () => import('@/views/Agreement.vue'), meta: { requiresAgreement: false } // 协议页本身必须放行 }

全局前置守卫中执行协议校验

在 router.beforeEach 中，先判断目标路由是否要求协议同意；再检查用户是否已同意；未同意则跳转协议页，并阻止继续导航。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

立即学习“前端免费学习笔记（深入）”；

• 关键逻辑顺序不能颠倒：先 to.matched.some(...) 判断是否受控，再读取状态，最后决定 next() 或 next('/agreement')
• 务必排除协议页自身，否则会形成跳转死循环
• 可叠加登录态校验（如 requiresAuth && !isLogin），协议同意应作为独立前置条件，甚至优先于登录

协议页提交后正确放行

用户在协议页完成勾选并提交后，需立即更新状态，并主动触发一次 router.push 跳转回原目标页（通过 query.redirect 携带）。

• 协议页中提交成功后执行：

localStorage.setItem('agreementAccepted', 'true') const redirect = this.$route.query.redirect || '/' this.$router.push(redirect)

这样既保证状态落地，又恢复用户原始意图，体验更自然。