Vue路由跳转至产品详情页后仍显示全部产品问题求助

核心原因：列表页与路由出口重复渲染 #

你遇到的详情页仍显示所有产品的最可能原因是App.vue中同时直接挂载了ProductPage组件和路由出口<router-view>。比如App.vue模板如果是下面这样，就会导致无论跳转哪个路由，产品列表都会一直显示在页面上，和详情页内容叠加：

<template>
  <ProductPage />
  <router-view />
</template>

修复方案 #

修改App.vue，只保留路由出口，列表页完全通过路由访问：

<template>
  <router-view />
</template>

这样只有当前路由对应的组件会被渲染，不会出现内容叠加的情况。

现有代码的其他问题（影响详情页正常渲染） #

1. Show.vue中未定义id变量 #

模板里使用了{{ id }}但未在脚本中声明，会触发控制台报错，修改如下：

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from 'vue-router'
import axios from 'axios';

const product = ref({}) // 单个产品是对象，初始化为空对象而非数组
const route = useRoute()
// 声明id变量
const id = route.params.id

onMounted(async () => {
    const uri = "http://localhost:8000/api/v1/products/" + id;
    try {
      const response = await axios.get(uri);
      product.value = response.data;
      console.log(product); // 移到请求成功后打印，才能看到真实数据
    } catch (err) {
      console.error('获取产品详情失败:', err)
    }
});
</script>

2. Show.vue中product初始值类型错误 #

单个产品是对象类型，原代码初始化为ref([])（数组）会导致模板中product.product_name等属性访问报错，改为ref({})即可避免。

3. axios请求的异步日志位置错误 #

原代码中console.log(product)写在axios.get().then()外面，会打印初始的空对象，无法看到请求返回的真实数据，需移到请求成功的回调内部。

路由配置优化建议 #

当前路由配置无功能性错误，但可以优化props传递逻辑，让组件更简洁：

// router/index.js
{
  path: '/show/:id',
  name: 'show',
  props: route => ({ id: route.params.id }), // 直接将id作为props传递给组件
  component: ShowView
}

之后在Show.vue中通过props接收id：

<script setup>
const props = defineProps(['id'])
// 后续用props.id替代route.params.id即可
</script>

内容的提问来源于stack exchange，提问作者Rob644