Nuxtの使用

プロジェクトはvueで開始するが,メタ画像とSEOを最適化するためにnuxtフレームワークを導入する必要がある.vueで完了しましたがnuxtに変換するといくつかの問題が発生しました.

VueとNuxtディレクトリ構造の違い

最大の違いは、ルータファイルを単独で使用する必要がないことです!

Vue router

vueでは、ルータに接続するには、routerフォルダにjsファイルを作成し、直接接続する必要があります.

Nuxt router

ただし、pagesフォルダにファイルを作成するとnuxtは自動的にルータ接続を提供します..nuxtフォルダに隠されているルータ.jsで自動的に作成されます.
ページにはquestions.vue、tutorial.vue、index.vueのファイルがあります.

この時点で発生する問題

vueではrouterjsファイルでprops: trueと宣言した場合、ページをめくるときにparams値を渡すことができます.

this.$router.push({ name: "Loading", params: { firstTest: true } } );

// Loading.vue
props: ["firstTest"]

Loadingというページに移動することで、変数firstTestの値trueが渡され、利用可能になります.
nuxtでrouterjsは自動生成なのでvueのようにparams値を渡すことはできません.
だから見つけた方法はクエリーに任せます!

this.$router.push({path: "Loading?firstTest=true"});

// Loading.vue
data() {
    return {
      firstTest: null,
    }
},
created() {
    if (this.$route.query.firstTest) {
      this.firstTest = this.$route.query.firstTest;
    }
}

クエリーにより、ページを個別に作成する必要がなくても、Loadingにデータを渡すことができます.考えてみると簡単ですが、2日間考えてこれを研究しました.