Vue Router：地址、匹配与导航模型

前置：Vue组件、ref/watch和HTTP异步调用。本篇以任务列表、详情、编辑工作台解释地址模型；路由表src/router.mjs和共用组件src/TaskPage.vue见Vue Router完整项目源码（examples/web/p2-vue-router）。示例未执行；命令与现象均为读者未来自行验证的步骤和预期，不能视为运行记录。

Vue Router的路由记录和当前地址有什么区别

Vue Router的路由记录和当前地址有什么区别？路由记录是path、name、component等配置；当前地址是一次匹配结果，包含params、query和matched。/tasks/:id是记录，/tasks/12是某次地址。RouterView根据匹配结果显示组件，RouterLink生成链接并处理客户端导航；直接修改DOM或靠全局变量模拟地址会破坏前进、后退和分享。

本例定义列表、详情、编辑和兜底页面，根路径重定向到命名列表。路由名在应用内唯一，链接使用{name,params}避免到处拼接路径。不要同时传path和params期望路由器替你插值；需要动态参数时用name。详情与编辑共用TaskPage组件，但仍通过route.name区分视图。

Vue Router什么时候用params什么时候用query

Vue Router什么时候用params什么时候用query？params标识路径资源，例如任务id；query适合可选筛选、页码或展示偏好。所有URL输入都不可信，可能缺失、重复或被手工修改。示例只对id读取和校验，不把query直接当数据库条件；如果将来添加页码，应验证范围并定义默认值，而不是直接parseInt接受残余字符。

Java的Long标识可能超过Number安全整数范围，转换会丢失精度，因此路由params中的id始终保留字符串，正则检查规范十进制，再用长度和字典序限制Long上限；禁止Number(id)。版本也保留字符串，从API响应到PUT/DELETE原样携带。前端校验避免无意义请求，后端仍最终判断格式与资源是否存在。

Vue Router切换任务参数为什么组件没有重新挂载

Vue Router切换任务参数为什么组件没有重新挂载？同一条路由的参数变化时，路由器可能复用组件实例，mounted不会因此重新执行。只在onMounted读取一次会让地址变为任务B而页面仍显示任务A。示例用watch显式侦听route.params.id、route.name和重试序号，immediate保证首次进入也加载；没有侦听整个route而引入无关变化。

切换详情和编辑也要重新读取，确保草稿以当前服务端版本建立。重试用计数器而非同值字符串，使重复点击能重新请求。watch回调同步注册onCleanup，组件卸载或下一次触发时取消旧读取并使旧结果失效。不要只加RouterView的key强制重建来掩盖未理解的数据生命周期；重建可选但仍要处理请求和错误。

Vue Router导航守卫能替代后端鉴权吗

Vue Router导航守卫能替代后端鉴权吗？导航守卫可以取消、重定向或延迟页面导航，适合离开确认和进入条件；不能保护HTTP接口，也不能建立数据库所有权。用户可以绕过页面直接请求后端。示例没有认证系统，不添加假登录，也不拿meta.requiresAuth当安全措施；生产权限应由后端逐次验证。

数据可以导航前取，也可以导航后取。本例选择导航后加载，让详情立即显示loading和可重试错误。若在守卫内加载，应明确取消导航、错误显示和目标地址竞争；不要把两种方案混用成重复请求。官方依据见导航守卫和数据获取。

练习：地址与组件复用推演

从/tasks/12切到/tasks/13，再切到/tasks/13/edit，解释哪些输入变化会触发示例侦听器。把id改为9007199254740993时，使用Number转换会有什么风险？再区分/tasks/abc与/unknown的处理。

参考答案（推演，未执行）

第一次id变化，第二次route.name变化，均应重新读取并重置草稿；不能依靠mounted只触发一次。9007199254740993在Long范围内但超过JS安全整数，Number可能舍入到其他标识，必须保留原字符串。/tasks/abc匹配详情记录后由validId拒绝，不发读取；/unknown不匹配已知记录，进入NotFound。前端拒绝不取代后端验证。