Vue.js
vue-router
vuex
vue-loader
vueify
vue-cli
Vue.js(ヴュー・ジェイエス)またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。一方で高機能なシングルページアプリケーション(SPA)を構築することも可能である。
ネストされたルートをネストされたコンポーネントにマッピングすることをサポートし、きめ細かな移行制御を提供する。 Vue+vue-routerを使用したフロントエンドルーティングシングルページアプリケーションの作成は容易である。 Vueでは、開発者は既に大きなコンポーネントを構築する小さなビルディングブロックでアプリケーションを作成している。vue-routerをミックスに追加すると、コンポーネントは所属するルートにマッピングするだけで、親ルートルートは子ノードのレンダリング先を示す必要がある。
上記のコードは、
websitename.com/user/<id>にフロントエンドルートを設定する。
(const User ...)で定義されたユーザーコンポーネントでレンダリングされるもの。
ユーザーコンポーネントが、$routeオブジェクトのparamsキー($route.params.id)を使用してURLに入力されたユーザーの特定のIDを渡すことを許可する。
このテンプレート(ルータに渡されたパラメータによって異なる)は、DOMのdiv#app内で<router-view></router-view>にレンダリングされる。
websitename.com/user/1と入力すると最終的に生成されるHTMLは次のようになる