nuxt框架中路由動態傳參及結構分析之文章跳轉詳情頁面傳遞文章id

落花の无痕發表於2024-06-10
UX框架路由

在nuxt裡面我們會經常使用到路由傳遞引數，列如，登入，文章跳轉詳情頁面等，下面我就以文章列表跳轉文章詳情頁面記錄一下。

1、首先這個是我的目錄結構：

在文章列表頁面：list.vue（layout目錄下的這裡其實是一個元件） 裡面我寫了這樣一段實現跳轉傳遞，這裡我使用到了

<nuxt-link>（當然你有其他辦法也可以使用其他的）
 傳參：`<nuxt-link :to="{path:'/about',query:{index:id}}" target="_blank" ><nuxt-link>`
 位址列顯示：`loaclhost:3000/about/id`
 接收位址列引數：`this.$route.query.index`

2、文章詳情頁面：articledetails.vue（存在page目錄下的頁面）

結構：

3、那麼在articledetails.vue裡面怎麼獲取 文章列表list.vue頁面 傳遞的 文章id呢？這裡我使用到了ts 和 路由（一般來說在nuxt3裡面不需要安裝依賴了，報錯就去安裝router）

import { useRouter } from 'vue-router'; // 從 vue-router 匯入 useRouter

詳細ts程式碼：

<script setup lang="ts">
import { ref, onMounted} from 'vue';
import { useRouter } from 'vue-router'; // 從 vue-router 匯入 useRouter
import DOMPurify from 'dompurify';

const router = useRouter();
const articles = ref({});
const articleId = ref('');

// 從查詢引數中獲取文章ID
watch(
    () => router.currentRoute.value.query.index,
    (newId: string | null) => {
      if (newId) {
        articleId.value = newId;
        fetchArticles();
      }
    }
);

onMounted(() => {
  // 在元件掛載時獲取文章ID
  const idFromQuery = router.currentRoute.value.query.index;
  if (idFromQuery) {
    articleId.value = idFromQuery;
    fetchArticles();
  }
});

//根據文章id獲取文章資料
const fetchArticles = async () => {
  try {
    const apiUser = "http://192.168.68.164:8642";
    const url = `${apiUser}/api/article/one?id=${articleId.value}`;
    const response = await fetch(url);
    const data = await response.json();
    // 檢查響應的 code 是否為 200
    if (data.code === 200) {
      articles.value = data.data; // 直接賦值物件
      // 清理 HTML 內容以防止 XSS 攻擊
      const cleanedContent = DOMPurify.sanitize(data.data.content);
      articles.value = { ...data.data, content: cleanedContent };
    } else {
      console.error('資料請求失敗：', data.msg);
    }
  } catch (error) {
    console.error("請求出錯：", error);
  }
};
</script>

請注意以下幾點：

我們使用 watch 和 onMounted 來處理查詢引數的變化。這確保了無論何時查詢引數 index 發生變化，都會觸發資料獲取。
我們在 watch 中檢查 newId 是否為 null，因為我們不想在沒有有效的 ID 時嘗試獲取資料。
我們在 fetchArticles 函式中使用 articleId.value 來構造請求 URL。
確保你的 <nuxt-link> 正確地傳遞了查詢引數，並且你的 API 能夠處理透過查詢引數傳遞的 id。如果問題仍然存在，請檢查網路請求以確認伺服器是否接收到了正確的引數。

相關文章