vue.js - 如果部署时不存在斜杠,则不会获取查询字符串
问题描述
我必须从我的Gridsome应用程序中的 URL 读取查询参数。我有 2 个 URL 案例,其中一个是在我的应用程序中访问时,我的query
密钥是空对象。{}
this.$route.query
案例 1: -在查询参数开始之前https://app.com/forms/ads/?param1=one¶m2=two
有一个斜杠。/
案例 2: https://app.com/forms/ads?param1=one¶m2=two
-/
在查询参数之前没有斜线。
当我访问this.$route.query
这localhost
两种情况时,我得到了param1
and的值param2
。
我的问题是当我将它推向生产时,案例 2返回一个空对象{}
。
storeUtmData() {
const utmSource = this.$route.query.utm_source;
const utmMedium = this.$route.query.utm_medium;
console.log(this.$route.query); // return {}
...
},
解决方案
case1在文件夹“ https://app.com/forms/ads/ ”中的“index.html”中请求,而对于 case2,当您使用 gridsome 构建项目进行生产时,静态服务网页上将不存在任何资源(如果你没有任何真正特殊的基础设施)。由于该资源不存在,我的猜测是您使用“this.$route”访问的 vue-router 在这种情况下仅包含一个空对象。
为什么它在本地工作?
我可以想象在本地开发环境中,express 将资源“广告”视为一条路线,而在现场只有一个包含和 index.html 的文件夹,该文件夹由网络服务器提供服务。路由与由 webserver 静态服务的文件夹的区别在于,来自 nodejs express 应用程序的路由实际上是直接触发应用程序逻辑执行,而 webserver 主要传输文件夹中的静态文件。按照惯例,在 URL 的末尾使用斜杠访问文件夹。
如需更多信息,请阅读以下部分: https://en.wikipedia.org/wiki/Clean_URL#Structure https://en.wikipedia.org/wiki/Clean_URL#Implementation
我希望这能回答你的问题。
为什么需要 case2 才能在生产中工作?至少在您的应用程序中如何链接到某个 URL 应该在您的控制之下。
干杯,电子手表
推荐阅读
- c - 在 C 中记录和替换文本文件中的变量
- java - 使用 BigDecimals 计算百分比
- visual-studio-code - 如何在macbook的vscode中获得“”多选中的整个文本?
- c# - 帐号输入验证 C#
- python - 如何使用python删除文件夹内的所有文件夹?
- json - 如何使用 python 从 MongoDB 中的 2 个集合中查找数据
- java - 如何分析以下代码的时间复杂度?
- android - Recycler View add On Item Click Listener 多次启动活动
- css - 当一个组件以角度放置在另一个下方时,组件是重叠的
- datetime - Mule Dataweave:无法将 :string 强制转换为 :localdatetime