vue-routerとvuefireで動的に取得先を変更したい

Question

###前提・実現したいこと
Vue.js(Vue CLIのwebpackテンプレートを使用)で、vuefireとvue-routerを使ってデータの取得を行いたいです。URLから$router.params.idを取得してvuefireのURLを動的に変更したい。

###該当のソースコード
router,コンポーネントの設定は以下の通りです。

const route = {
  {
    path: 'sample/:id',
    name 'Sample',
    component: Sample
  }
}

import firebase from 'firebase'
export default {
  firebase: {
    item: firebase.database().ref(`/items/${this.$route.params.id}`)
  }
}

Cannot read property 'params' of undefinedのエラーが発生して動かなくなってしまいました。

###試したこと
おそらく、vuefireの発火タイミングがcreatedであることが原因?
vuefireの発火タイミングかrouterのid取得を何か別の方法でできれば解決するのかなとは思ったものの、いまいちわかりませんでした...

###補足情報(言語/FW/ツール等のバージョンなど)

• vue: 2.5.2
• vue-router: 3.0.1
• vuefire: 1.4.5

Answer 1

そもそも設計を見直したほうがいいんじゃないでしょうか．
どんなことを実現しようとしているんですか？