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

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

GoogleMapのカスタマイズ

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