2Vuejsを一通り使ってみてわかったことのメモとして残します。VuejsでSPAを作りたいvuejsの他にvue-routerというライブラリを使います。https://github.com/vuejs/vue-router前に記事書いてあったので忘れていた。@click="alert">foo</div>`,});パラメーターの変更を検知するSPAなのでURLは動的に変更されます。動的に変更したときに例えば、ユーザー一覧でURLが「users」ユーザー一覧からユーザー名で検索する場合、users?username=tarouこんな感じのURLにしますよね。usersからURLの変更を検知するにはwatchを使います。}これで$routeの変更を検知できます。toには現在のroute、fromは一つ前のrouteです。to.query.usernameでURLの「?username=”ここの部分”」にアクセスできます。watchを使ってURLが変わる度にajaxでデータを取得します。スクロール位置を保持しておきたいVuejsはhtmlに書いたroute-viewにcomponentのtemplateが適用されます。一覧ページをスクロールして見ていて詳細ページに飛んだときにブラウザバッグをするとまた、一番上からスタートという問題が起きます。これを解決するためにスクロール位置を保存しておきたいです。そんなときは、scrollBehaviorを使います。0}上記のスクロール位置データが入っています。これをreturnすればブラウザバッグしても詳細ページを見る以前の位置からスタートすることができます。ちなみにスクロールデータが入ったオブジェクトを返すだけでOK※このscrollBehaviorの発火タイミングがわからない。vueがDOMを生成する前に発火するためか、v-forでリスト式で表示している場合正しくスクロールしなかったりする。componentごとにdateを持っていて既に取得しているデータをページが変わるごとに毎度ajaxで取得していたので毎回DOMを作り直していたみたいです。親にデータを持たせて、子componentを参照するようにしておけばDOMが保持されているので正しいスクロール位置に戻ることができました。—–追記—–なんかうまくいかないなあと思ったらそもそも間違っていたのかもしれない...componentはあくまでUIの部品として扱って、データは親が持つべき。componentは親が持っているデータを参照してUIを作っていくって感じがいいのかな。:javascript綺麗な円グラフが作れるプラグイン「jquery-plugin-circliful」の使い方ブラウザ上でモジュール管理ができるbrowserifyの使い方browserify+vuejs+vue-routerでコンポーネントを分割するvue-routerを使ってみる。コメントをキャンセルメールアドレスが公開されることはありません。常駐している会社を変えるぞ!レバテックフリーランスで新しい案件...次の記事browserify+vuejs+vue-routerでコンポ...ブログを書いている人20代フリーランスエンジニアの個人ブログ。完全食Huelで買ってみた。完全食Huelで買ってみた。