Nginx rewrite last 与 redirect 的区别——Vue history 模式短链接踩坑记录

张开发
• 2026/4/13 1:01:21 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

Nginx rewrite last 与 redirect 的区别——Vue history 模式短链接踩坑记录
背景项目中需要将短链接https://v3.abc.com/23-DLN25D解析到 Vue 前端页面并传递mid23、codeDLN25D两个参数。Vue 项目使用 history 路由模式入口文件为redpack.html。Nginx 配置location ~* ^/([0-9])-([A-Za-z0-9])$ { rewrite ^/([0-9])-([A-Za-z0-9])$ /redpack.html?mid$1code$2 last; } location / { try_files $uri $uri/ /redpack.html; }问题现象用last时访问https://v3.abc.com/23-DLN25Dcurl -I返回 HTTP 200内容是redpack.html728字节说明文件确实返回了但浏览器页面空白Vue 组件的created不执行没有任何反应直接访问https://v3.abc.com/redpack.html?mid23codeDLN25D却完全正常。原因分析lastredirect302处理方式Nginx 内部重定向返回 302浏览器重新发请求浏览器地址栏不变仍是/23-DLN25D变为/redpack.html?mid23codeDLN25DVue Router 看到的 path/23-DLN25D/redpack.html路由是否匹配未匹配组件不加载匹配ScanEntry组件正常加载last是 Nginx 内部完成整个处理浏览器完全不知道发生了重写地址栏 path 仍是/23-DLN25D。Vue Router history 模式拿到这个 path路由表里找不到对应规则组件不挂载created自然不执行。redirect让浏览器收到 302 后真正跳转到新 URL地址栏变化Vue Router 拿到正确的/redpack.html路径路由匹配成功一切正常。解决方案把last改为redirectlocation ~* ^/([0-9])-([A-Za-z0-9])$ { rewrite ^/([0-9])-([A-Za-z0-9])$ /redpack.html?mid$1code$2 redirect; } location / { try_files $uri $uri/ /redpack.html; }总结当 Vue history 模式的路由需要依赖 URL path 匹配时Nginx rewrite 必须用redirect或permanent而不能用last。last只适合纯后端处理的场景前端路由感知不到内部重写。

更多文章