Passing data to a Vue app

Question

I have two pages: a login page and a Vue-based dashboard page. When a submit button on the login page is clicked, it redirects to the dashboard page. This is simply a typical login scenario.

Now I want to pass some data entered on the login page to the dashboard page, like user name, etc. What's the typical way of doing it? Maybe one can pass the data in main.js while instantiating a Vue instance, but I don't know how to pass the data to main.js.

Updated:

For example, here are the pages.

Login page, which is just a Vue-agnostic, vanilla html page:

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

The main.js file in Vue-based Dashboard page:

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

How can I pass userName entered in the input on the Login page to the Vue instance?

Any advice would be appreciated. I am very new to Vue. Thanks.

https://vuejs.org/v2/guide/components-props.html, https://vuex.vuejs.org/en/, Event bus depending on your taste, maybe passing data with your router parameters. Without code, it's really hard to understand what can help you. — Yurii N., May 16 '18 at 15:30
Am I right, that login and dashboard are two different client applications? If yes, then you should invoke server with your userName, which will return your dashboard with prefilled userName in it. — Yurii N., May 16 '18 at 15:45
Yes, you are right. Login and dashboard are two different (separated) applications (pages). — lgc_ustc, May 16 '18 at 15:54
use (vuex.vuejs.org/en). After you successful login before the redirect you can commit to the state and the dashboard will get the username from the state. — Trevor V, May 16 '18 at 16:10
I don't think `vuex` will solve this. It would really help to see the whole configuration. generally an event bus will do, but that's only the case if you are already on a Single Page! so this won't work here too! only other viable option that I see is to use localStorage! this would work just fine! — Moher, May 16 '18 at 19:15

score 0 · Answer 1 · answered Dec 17 '18 at 10:44

From my understanding, Vue is a client-side Javascript application.

For GET parameters, these appear in the URL and hence can be accessed by your Vue app (or any JS script).

POST params are only handled on the server-side. They cannot be accessed by a JS/Vue App. You have to think of an alternate way of making the params accessible to your application such as by setting cookies, sessionStorage, etc.

Refer: How to read the post request parameters using javascript

Passing data to a Vue app

1 Answers1