はじめに Ateam Hikkoshi Samurai Inc. Advent Calendar 2017の21日目です。 本日はエイチーム引越し侍、フロントエンドグループの@hashimoto-1202が担当します。 vue.jsのライブラリであるvue-routerを使って、非同期でページ間遷移できるナビゲーションを作ってみたので、その内容をまとめました。 環境構築からファイルの記述まで順番にまとめていくので、これからvue-routerを使ってSPA(シングルページアプリケーション)を作ってみたいという方の参考になれば幸いです。 目次 今回やりたかったこと まずは環境構築 ディレクトリ構成と各ファイルの記述について まとめ 今回やりたかったこと 今回は 下記の2点を勉強することを目的にナビゲーションを作ってみました。 * vue-routerを使ってみる * vueファイル(単一ファ
![vue-routerを使ってSPAの足回りを作ってみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/22d2173e43c0b95bde9038bb6610c5bc2a5fbc29/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9dnVlLXJvdXRlciVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNlNQQSVFMyU4MSVBRSVFOCVCNiVCMyVFNSU5QiU5RSVFMyU4MiU4QSVFMyU4MiU5MiVFNCVCRCU5QyVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDbWlkZGxlJnM9MDYxOGVkN2ZiYThjYTJjNWY0NmJlNDQyN2NjM2EyNWU%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGFzaGltb3RvLTEyMDImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI2ZDFhNzQ5NGY4NzY3ZDRmYzQxNWU4OTE5ZjlkMjg0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5851d92cf27fc140102af28b9294c1ab)