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

npmでのJSライブラリインストール&ビルド(※gulp使用時)

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

webpackについて再履修2

以前やったこの記事への追記的な意味で。 webpackについて再履修 Contents1 webpack-cli2 gulp-webpackは非推奨3 devtoolでデバッグ可能 webpack-c …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …

アーカイブ