Vue.jsを使ってみた(Vue RouterでSPAっぽくする)

この前までこんな感じになっていました。

前回まで同じページ内での操作をできるようにしていました。今回は、SPA(Single Page Application)っぽく、webサーバーを介さずページ遷移をしていきたいと思います。

参考にしたのはもちろんこちら。

Vue Router

シングルページアプリケーション（英: single-page application、SPA）とは、単一のWebページのみから構成することで、デスクトップアプリケーションのようなユーザ体験を提供するWebアプリケーションまたはWebサイトである。

(出典：Wikipedia)

だそうです。要するに、ページ遷移をサーバー側ではなくクライアント側で行うアプリケーションのことをSPAと呼びます。

Vue.jsではSPA構築のためのルーティングライブラリとしてVue Routerが公式に用意されています。

ルーティングとは、あるURLのときにそれに該当するページコンテンツ部分などのDOMを書き換え、「見た目上」のページ遷移を起こすことを言います。 SPAのルーティングでは、画面遷移と合わせてURLを変更することがポイントで、これによりサーバーと通信しているかのように見えるわけです。

今回は、検索画面とそれに応じたタスクボードの表示をやってみます。 URLとしては

となります。

お遊びならこんなもんかと。もっと言うなら、ここで他のサーバーとかと連動して、コンテンツを動的に変化できればもうSPAですね。

主だったところはだいたいこんな感じになりました。

その他、できたもんはこちら。（検索っぽくしてますが、特に何も検索してません。。。）

These relative modules were not found:

* ./router in ./src/main.js

下の記事を見る限り、パスが想定していないところを向いている模様。

わたしの場合の原因は超くだらなくて、なぜかディレクトリ名の後ろに全角スペースが入っていましてた。なんでだろ。。。気をつけよ。。。

SPAっぽいのができてよかったよかった。これで、クライアントサイドについてさらっと一通り触った気がします。あとは、サーバーサイドと非同期通信で連携できれば、SPAって呼んでいいかと思いますので、そこまでがんばります。