通过带参数的外部 URL 打开 vue 页面

Posted

技术标签:

【中文标题】通过带参数的外部 URL 打开 vue 页面【英文标题】:Opening a vue page through external URL with parameter 【发布时间】:2021-11-01 19:08:34 【问题描述】:

我将 Laravel 与 Vue 结合使用。我有一个名为“/app/main”的主 Web 应用程序的路径。这会加载一个特定的 vue 组件“main.vue”。

该页面的一个功能是将带有信息摘要的电子邮件发送给客户。我希望这封电子邮件包含指向该页面的链接,但带有此订单的特定 ID。

所以像 http://nameofdomain/app/main/100000 这样的链接应该打开默认页面 http://nameofdomain/app/main,在那里我会在某处捕获 100000 作为传递的参数,以便我可以处理显示该特定 ID。

起初我以为我必须调整 laravel 路径并使用动态参数,但这似乎是错误的,因为我忽略了整个 vue 部分,这是我的登录页面。然后我为 Vue 研究了类似的东西,您可以在其中添加一个动态参数,例如:

路径:'/app/main/:id',

但这不起作用。它没有将 http://nameofdomain/app/main/100000 视为有效页面(404 错误)。

那么我如何为我的客户提供一个包含 ID 的链接,这样当他们点击链接时,他们会被重定向到我的 Laravel/Vue 页面,并且它只显示该订单的 ID(通过在 URL 中传递它)?

提前致谢。

【问题讨论】:

【参考方案1】:

你的客户端和你的服务器端是分开的吗?

如果没有,您能否提供该 Vue 组件的 Laravel 路由定义?也许您也只需要在服务器端代码中添加该参数匹配

【讨论】:

请添加更多详细信息以扩展您的答案,例如工作代码或文档引用。

以上是关于通过带参数的外部 URL 打开 vue 页面的主要内容,如果未能解决你的问题,请参考以下文章

vue 带参数跳转打开新窗口 $router.resolve 参数不在url中

vue 带参数跳转打开新窗口 $router.resolve 参数不在url中

vue 跳转到外部链接

vue路由跳转页面的几种方式及其区别

详解vue 路由跳转四种方式 (带参数)

分享url带中文参数,打开html操作完毕跳转jsp页面中文乱码解决