将数据传递给 Vue 应用程序答案

【问题标题】：Passing data to a Vue app将数据传递给 Vue 应用程序
【发布时间】：2018-05-16 15:22:09
【问题描述】：

我有两个页面：一个登录页面和一个基于 Vue 的仪表板页面。单击登录页面上的提交按钮时，它会重定向到仪表板页面。这只是一个典型的登录场景。

现在我想将登录页面上输入的一些数据传递到仪表板页面，例如用户名等。典型的做法是什么？也许可以在实例化Vue实例时将数据传递给main.js，但我不知道如何将数据传递给main.js。

更新：

例如，这里是页面。

登录页面，它只是一个与 Vue 无关的普通 html 页面：

<input id="userName"/>
<a href="dashboard.html"></a>

基于 Vue 的 Dashboard 页面中的 main.js 文件：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

如何将登录页面中输入的用户名传递给 Vue 实例？

任何建议将不胜感激。我对 Vue 很陌生。谢谢。

【问题讨论】：

vuejs.org/v2/guide/components-props.html, vuex.vuejs.org/en, 事件总线取决于您的喜好，可能会使用您的路由器参数传递数据。没有代码，真的很难理解什么可以帮助你。
按建议添加的代码。谢谢。
我说得对吗，登录和仪表板是两个不同的客户端应用程序？如果是，那么您应该使用您的用户名调用服务器，这将返回您的仪表板，其中包含预填充的用户名。
是的，你是对的。登录和仪表板是两个不同的（分离的）应用程序（页面）。
使用 (vuex.vuejs.org/en)。在重定向之前成功登录后，您可以提交状态，仪表板将从状态中获取用户名。

标签： vue.js

【解决方案1】：

据我了解，Vue 是一个客户端 Javascript 应用程序。

对于 GET 参数，这些参数出现在 URL 中，因此可以由您的 Vue 应用程序（或任何 JS 脚本）访问。

POST 参数仅在服务器端处理。 JS/Vue 应用程序无法访问它们。您必须考虑另一种让应用程序可以访问参数的方法，例如设置 cookie、sessionStorage 等。

【讨论】：