DAY13: Nuxt.js 中的動態路由

什麼是動態路由？

動態路由是指路由的一部分可以是動態的，即基於特定數據或參數生成。這使您能夠創建具有動態內容的頁面，例如部落格文章或產品詳細信息頁面。

創建動態路由

需要在 Nuxt.js 項目中的 pages 文件夾中創建一個帶有下劃線 _ 前綴的 Vue 文件。例如，要創建一個動態路由，您可以創建一個名為 _slug.vue 的文件：

<!-- pages/_slug.vue -->

<template>
  <div>
    <h1>這是動態路由頁面</h1>
    <p>您正在查看帖子: {{ $route.params.slug }}</p>
  </div>
</template>

<script>
export default {
  // ...
};
</script>

我們創建了一個動態路由頁面，該頁面將根據路由的 slug 參數動態生成內容。

使用動態路由

可以使用 $route.params 對象來訪問動態路由的參數，並在頁面中使用它們。這讓您可以根據參數來動態載入和呈現內容。

<!-- 在動態路由頁面中使用動態參數 -->

<template>
  <div>
    <h1>這是動態路由頁面</h1>
    <p>您正在查看帖子: {{ $route.params.slug }}</p>
  </div>
</template>

動態路由的優勢

動態路由使您能夠輕鬆創建具有可變內容的頁面，並根據不同的路由參數動態呈現內容。這對於建立部落格、產品詳細信息頁面或任何需要根據數據動態生成的內容非常有用。