2020.8.3の学習ノート

someone
3 8月, 2020
■本日の目的
Vue.jsの機能を使うこと
・レイアウト共通化
　・components/AppNavigation
　・layouts/default.vue
　・共通ファイルの読み込み



■
AppNavigation
<template>
  <ul>
    <li><nuxt-link to="/">home</nuxt-link></li>
    <li><nuxt-link to="/child">child</nuxt-link></li>
  </ul>
</template>
default.vue
<template>
  <div>
    <span>default layout</span>
    <AppNavigation />
    <hr>
    <nuxt />
    <hr>
    <footer>
      footer
    </footer>
  </div>
</template>

<script>
import AppNavigation from '~/components/AppNavigation.vue'

export default {
  components: {
    AppNavigation
  }
}
</script>
読み込み(index.vue)
<script>
import AppNavigation from '~/components/AppNavigation.vue'
export default {
結果:
Index pageにナビゲーションがレンダリングされていること

〇複数レイアウトのだしわけ
single.vue
<template>
  <div>
    <span>single layout</span>
    <AppNavigation />
    <hr>
    <nuxt />
    <nuxt-link to="/">トップに戻る</nuxt-link>
    <hr>
    <footer>
      footer
    </footer>
  </div>
</template>

<script>
import AppNavigation from '~/components/AppNavigation.vue'

export default {
  components: {
    AppNavigation
  }
}
</script>
上記のままだとdefaultを読み込むので、
だしわけたいpagesのscriptのlayoutに明示的に宣言しておくこと
export default {
    layout: 'single'
}
</script>
■ライフサイクルとレンダリングまでのプロセス

  1. Request
  2. Store Action
  3. Middleware->config/layout/page/children
  4. validate->page
  5. asyncData
  6. Render
機能実装における、それぞれの責務を分担することで、開発の迷いがなくなる。
■Middlewareによるグローバルフックの登録








■参考サイト
Nuxt のより効果的な機能のサンプル
Next Post Previous Post
No Comment
Add Comment
comment url