Vuejsとvue-routerでSPAを作るときに覚えたことメモ

Vuejsを一通り使ってみてわかったことのメモとして残します。

VuejsでSPAを作りたい

vuejsの他にvue-routerというライブラリを使います。

前に記事書いてあったので忘れていた。

pathに紐付けるcomponentをこんな感じにすれば、イベントも使える

component名は

var Foo = Vue.extend({
  date: function(){
    title: "title",
  },
  methods: {
    alert: function(){
      alert("click!");
    }
  },
  template: `<div @click="alert">foo</div>`,
});

パラメーターの変更を検知する

SPAなのでURLは動的に変更されます。

動的に変更したときに例えば、ユーザー一覧でURLが「users」

ユーザー一覧からユーザー名で検索する場合、users?username=tarou

こんな感じのURLにしますよね。

usersからURLの変更を検知するにはwatchを使います。

使い方

watch: { 
  '$route' (to, from) {
  } 
}

これで$routeの変更を検知できます。

toには現在のroute、fromは一つ前のrouteです。

to.query.usernameでURLの「?username=”ここの部分”」にアクセスできます。

watchを使ってURLが変わる度にajaxでデータを取得します。

スクロール位置を保持しておきたい

Vuejsはhtmlに書いたroute-viewにcomponentのtemplateが適用されます。

例えば、一覧ページをスクロールして見ていて詳細ページに飛んだときにブラウザバッグをするとまた、一番上からスタートという問題が起きます。

これを解決するためにスクロール位置を保存しておきたいです。

そんなときは、scrollBehaviorを使います。

const router = new VueRouter({
routes: […],
scrollBehavior (to, from, savedPosition) {
// 望みのポジションを返す
}
})

savedPositionには

{
x: 0,
y: 0
}

上記のスクロール位置データが入っています。

これをreturnすればブラウザバッグしても詳細ページを見る以前の位置からスタートすることができます。

ちなみにスクロールデータが入ったオブジェクトを返すだけでOK

※このscrollBehaviorの発火タイミングがわからない。

vueがDOMを生成する前に発火するためか、v-forでリスト式で表示している場合正しくスクロールしなかったりする。わかる人教えてください。

—–追記—–

勘違いしていました。componentごとにdateを持っていて既に取得しているデータをページが変わるごとに毎度ajaxで取得していたので毎回DOMを作り直していたみたいです。

親にデータを持たせて、子componentを参照するようにしておけばDOMが保持されているので正しいスクロール位置に戻ることができました。

—–追記—–

なんかうまくいかないなあと思ったらそもそも間違っていたのかもしれない…

componentはあくまでUIの部品として扱って、データは親が持つべき。

で、componentは親が持っているデータを参照してUIを作っていくって感じがいいのかな。