skillup

技術ブログ

JavaScript

vue-routerについて

投稿日:2019年6月22日 更新日:

vueでのルーティングに関して。

Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。

ただその場合でも擬似的なルーティング(URLの切り替えなどに関してSPAのページの切り替え)などは必要になってきます。

Vue Routerのインストール

vueでRoutingを使う場合、vue-routerというライブラリをインストールする必要が出てきます。

ソース

https://github.com/umanari145/vue/blob/master/vuecompo_sample2/

必要な部分のみ記述すると下記のようになります。

src/app.js(起動部分のJS)

src/router.js(ルーティングのJS)

index.html(htmlファイル)

devtoolインストール

今回の件とは関係ありませんが、ルーティングや変数の情報などをみれるdevtoolを。

構築が面倒だと思って懸念してましたが、ものすげー簡単でした・・・もっと早くやればよかった・・

Vue.js Devtoolsの導入方法と機能まとめ。Vue.jsを用いた開発を効率化させよう!

参考リンク

Vue.jsにVue Routerを導入してルーティングを行う方法

vue-routerで動的リンクを生成する

 

-JavaScript
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …