vue.jsでcomponentの位置を動的に変更する方法

Question

vue.jsで動的にcomponentの位置を変更できるコードを作りたいと思ってます。

例えば、

/A
ページにアクセスすると

[banner,article,article2,nav]

/Bページにアクセスすると

[article,article2,banner]

のようなdynamicな順序でcomponentを表示したいです。

尚、ページによって使わないcomponentが発生するので
必要なときだけ使うようにdynamic importを考えてます。

ここまでの考えで実装したのが以下のコードです。

<template>
 <component :is="whichStep"></component>
</template>

<script>
export default {
  components: {
    'Article': () => import('../components/Article'),
    'Article2': () => import('../components/Article2'),
    'Banner': () => import('../components/Banner'),
    'Nav': () => import('../components/Nav')
  },
  computed: {
    whichStep () {
      switch (key_number) {
        case 0:
          return 'Article'
        case 1:
          return 'Article2'
        case 2:
          return 'Banner'
        case 3:
          return 'Nav'
        default:
          return 'Error'
      }
}
</script>

これからは

const key_number_list = [2,0,1,3]
//[banner,article,article2,nav]

const key_number_list = [0,1,2]
//[article,article2,banner]

のような変数を作って(こちらはページによってjsonとかで受け取る予定)

<component :is="whichStep"></component>

この部分をkey_number_list配列のlengthほど生成して各値に該当するcomponentをreturnするような
方法を考えてますが、どう実装すればわからずこちらに質問します。

そもそもvue.jsでcomponentの位置を動的に変更させるにこの実装方法は正しいのかも伺いしたいです。

Answer 1

render関数使えば実現できると思いますがrender関数はPromiseな返値を許容してくれないので、Dynamic Importの対応がめんどくさいことになりそう。

<component>をv-forで複数配置する感じにすればいけますね。

<component v-for="item in items" :is="item" />

//中略
  computed: {
    items() {
      return key_number_list.map(n => getComponentName)
    }
  }

ただ一番手っ取り早いのはVue Router使って、ページごとに順番並び替えたコンポーネントを出し分ける方法かなと思います。

Comments

[Kimsehwa]

ありがとうございます。おかげさまで方向性を掴みました。
A,Bのようなページが数十万個あり、Vue Routerを利用してページごとに順番並び替えを行うのは難しいと思いました。

Answer 2

componentのis属性は1つのコンポーネントしか表示できないので
この実装方法は正しくないです。