在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。如果問題仍然存在，請檢查網絡請求以確認服務器是否接收到了正確的參數。
浙公網安備 33010602011771號