importファイルを動的に変更したい

2018年12月6日

前回jsonファイルをimportすることができました。
そのあと、dataAのページでdataA.jsonを、dataBのページでdataB.jsonをという感じにつくっていったとき
ページ内容は同じで読み込むjsonだけ違うページのときjsonファイルだけ指定できないかなってなりました。

routesを次のようにしてuser/fooやuser/barで読み込めるようにします。

routes: [
  { path: '/user/:id', component: DataPage }
]

params.idでfooやbarを取得できます。

DataPage.vue

import json from 'assets/${params.id}.json'
export default {
  data: {
    json
  }
}

import json from ‘assets/${params.id}.json’
というように書くとparams.idのjsonファイルを読み込むようにできます。

これでいちいちvueファイルを作る必要がなくjsonファイルだけ追加していけばよくなりました。