外观
Vue Router 路由与守卫
- 状态：未准备
- 适用方向：前端 / Go 全栈
- 最近复习：待填写
- 下次复习：待安排
一句话回答
Vue Router 把 URL 映射到组件，负责客户端导航、参数和导航守卫；history 模式依赖服务端回退配置，前端权限守卫只能改善导航体验，安全边界仍在服务端。
原理解释
hash 与 history
hash 模式把路由放在 # 后，片段通常不发送给服务端，部署相对简单；HTML5 history 模式使用 pushState 等改变路径，URL 更接近普通页面，但直接访问深层地址时需要服务端把应用路由回退到入口 HTML。API 和静态文件错误不能无差别回退成 HTML。
router 与 route
useRouter 取得导航实例，用 push、replace 等操作；useRoute 取得当前响应式路由信息。push 新增历史记录，replace 替换当前记录。params 对应路径参数，query 对应查询串；使用命名路由配 params 可由路由器编码，不能指望 path 与 params 同时传入时自动拼接参数。
ts
import { createRouter, createWebHistory } from 'vue-router'
export const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/login', name: 'login', component: () => import('./Login.vue') },
{ path: '/users/:id', name: 'user', component: () => import('./User.vue'),
meta: { requiresAuth: true } },
],
})
// hasSession 是应用提供的认证状态读取函数；页面路径为示意。
export function installAuthGuard(hasSession: () => boolean) {
router.beforeEach(to => {
if (to.meta.requiresAuth && !hasSession()) {
return { name: 'login', query: { redirect: to.fullPath } }
}
})
}导航守卫怎样组织？
beforeEach 做全局前置检查，beforeEnter 针对路由记录，组件内守卫处理离开确认或路由更新，beforeResolve 在解析阶段进一步检查；afterEach 做导航后的统计等，不负责阻止导航。现代写法可返回 false 取消、返回位置重定向、正常返回继续；使用 next 风格时必须避免重复调用或漏调用。
场景与边界
/users/1 切到 /users/2 时可能复用同一组件实例，mounted 不会因此必然重跑；可 watch () => route.params.id 或用更新守卫，并处理请求竞态。仅参数/查询变化并不重新触发所有进入/离开守卫。导航是异步的，需要等待完成时可 await push，并区分取消、重复导航等结果。
登录回跳地址需校验为允许的站内地址，避免开放重定向；前端隐藏菜单、移除路由或本地 token 存在都不能证明具有服务端权限。路由懒加载减少初始包，不表示其子组件的所有数据自动缓存。
项目中的应用
已有 EinoTalk 使用 React Router；可练习用 Vue Router 表达同样的登录与聊天导航，并对照两套路由的概念。现有项目尚未采用 Vue Router。
常见追问
- 刷新出现 404 为什么？ 浏览器向服务器请求真实路径，服务器未设置匹配的应用回退。
- 路由切换为何不重新请求？ 检查组件复用、请求触发位置和监听来源，不能只依赖 mounted。
- 动态路由等于权限控制吗？ 不是，仍需服务端逐次鉴权；退出时也要重置相关客户端状态。