Express（Node.js）からVue.jsに値を渡せるのでしょうか？

Question

やりたいこと

 
res.render('new_post.html',{
   user_name: 'test'

 });

このようにExpressで画面を遷移させるときに送るオブジェクトのuser_nameをEJSではなくVue.jsで使用したいのですが、なにか方法はありますでしょうか？

Answer 1

VueJS側はこれを読みましょう。
Vue.jsでAPIからデータをasyncでFetchして使う方法 - Tech Blog - プログラミングに関しての備忘録

Express側はこれを読みましょう。
Node.jsとExpressで簡易Webサーバーを作ってみる - Zenn

---

Viewに値を埋め込んで渡す手法は
大昔から存在する動的なHTMLを作って返すやり方です。

それとは別にWebブラウザがHTMLを読み込み
メモリ空間上にDOMツリーを生成して画面上に描画
それと平行してJavaScriptエンジンを立ち上げてDOMツリーを編集させ、画面の更新を促すやり方が存在します。

そのとき、JavaScriptは好きなタイミングで追加のHTTPリクエストを発射して文字列を持ち帰ってくる事が出来ます。
Fetch APIと呼びます。
これはJSONだとJavaScript側は簡単に扱えるので嬉しいです。

これを利用して、JavaScriptはFetch APIを利用して/user_nameに追加のデータを取得しに行き、
Expressは/user_nameのリクエストを拾ってJSONを返す。
Expressから受け取ったJSONを展開、VueJSの更新手順に則って画面の更新をしてやれば解決します。

Comments

[kazu235]

fetchの引数にはどのURLを指定すればいいのでしょうか？

[kazu235]

専用のAPIを用意して解決できました。

Answer 2

ベストアンサーのやり方が綺麗で汎用的ですが、一応こういうアプローチもあります。
【Vue.js】Flaskからテンプレートへ値を渡す方法

別言語の記事ですが、今回でいうとuser_nameをexpressのテンプレートエンジンで展開する際に、テンプレートエンジンの変数⇒JavaScriptのオブジェクトに変換してvue.jsのdataにセット、としてやることでvue.jsへデータが渡せます。