嵌套router <nuxt-child> (使用 nuxt)


Posted by rikkubook on 2021-05-06

之前有學習過運用 router製作千套式的頁面,但是都沒實際運用過~
剛好這次在使用 nuxt 製作頁面時有運用到

1. 資源

nuxt-child 组件

2. 解說

在nuxt中的父子頁
<nuxt-link> 取代<router-link>
<nuxt-child>取代<router-view>
只有在layout中的 <Nuxt />取代<router-view>

3. 範例

  • /investment
    • /directors
      • index
      • resolution
      • elect
        • directors.vue
  <ul id="tabList" class="flex">
    <li class="flex-shrink-0">
      <nuxt-link to="/investment/directors">
        <h3>A </h3>
      </nuxt-link >
    </li>
    <li class="flex-shrink-0">
      <nuxt-link to="/investment/directors/resolution">
        <h3>B</h3>
      </nuxt-link >
    </li>
    <li class="flex-shrink-0">
      <nuxt-link to="/investment/directors/elect">
        <h3>C</h3>
      </nuxt-link>
    </li>
  </ul>
<div>
    <nuxt-child />
</div>


#Nuxt #Vue







Related Posts

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 3

AWS Solutions Architect - Associate (SAA) 學習計畫與備考心得: Module 3

How to compare a fixed date stored in an object with the current date in JavaScript?

How to compare a fixed date stored in an object with the current date in JavaScript?

20210419 wk2 筆記

20210419 wk2 筆記


Comments