nuxt框架中路由动态传参及结构分析之文章跳转详情页面传递文章id

在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。如果问题仍然存在，请检查网络请求以确认服务器是否接收到了正确的参数。