使用 Page 建立 Route

在 Vue 我們會使用獨立的 router/index.js 定義 Route，Gridsome 則另外提供 Page 以實際 Component 定義 Route。

Version

Gridsome 0.7.23

pages/Product.vue

<template>
  <div>
    <h1>Product</h1>
  </div>
</template>

Vue 與 Gridsome 都建議以 PascalCase 對 component 檔案命名。

任何 component 在 pages 目錄下會自動成為 route，且 capital letter 成為小寫。

pages/NewProduct.vue

<template>
  <div>
    <h1>New Product</h1>
  </div>
</template>

若 component 的檔名為兩個英文單字組成，則 route 會自動以 - 間隔之。

src/pages/new/Product.vue

<template>
  <div>
    <h1>New Product</h1>
  </div>
</template>

若 product 想在 new 底下，只要在 pages 建立 new 實體目錄，並將 Product.vue 放在 new 目錄下。

src/pages/new/Index.vue

<template>
  <div>
    <h1>Index</h1>
  </div>
</template>

若想在 new 底下而不想輸入任何 page 名稱，可在 new 目錄下建立建立 Index.vue。

src/pages/404.vue

<template>
  <div>
    <h1>
      404 Pages
    </h1>
  </div>  
</template>

可自行在 pages 目錄下建立 404.vue 取代 Gridsome 內建的 404.vue。

需重新 yarn serve 才會生效