Vue 3模板仅偶尔显示数据求助：路由页面数据加载异常

两个关键错误导致数据不显示 #

1. 响应式丢失：直接替换ref对象 #

你在onMounted里直接执行post = json.data，这会把ref创建的响应式对象替换成普通JSON对象，断开了与模板的响应式绑定。模板无法感知到数据变化，自然不会更新显示。

修正方式：修改ref对象的.value属性，而不是替换整个变量：

post.value = json.data

2. 路由组件复用未触发重新请求 #

Vue Router会复用同一路由下的组件（比如从/blog/1跳转至/blog/2时，BlogPostDetailView组件不会重新创建），此时onMounted仅在首次加载时执行一次，后续路由参数变化不会触发新的请求。同时你直接赋值的id不是响应式变量，参数变化时也不会更新。

修正方式：监听路由参数变化，触发重新请求：

• 封装请求逻辑为独立函数
• 使用watch监听route.params.id的变化，调用请求函数

完整修正后的代码 #

<template>
    <div>
        Post id: {{ route.params.id }}
        {{ post }}
    </div>
</template>

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

const route = useRoute();
const post = ref({});

// 封装请求逻辑
const fetchPost = async (postId) => {
    const endpoint = "/file/" + postId;
    const response = await fetch(endpoint);
    const json = await response.json();
    post.value = json.data; // 保持响应式
};

// 首次加载时请求数据
onMounted(() => {
    fetchPost(route.params.id);
});

// 监听路由参数变化，重新请求数据
watch(() => route.params.id, (newId) => {
    fetchPost(newId);
}, { immediate: true });
</script>

额外说明 #

• 刷新页面时，组件会重新挂载，onMounted会执行，但如果之前的post赋值错误（直接替换对象），即使请求到数据，模板也无法响应，所以必须通过.value修改。
• 你之前的v-if="1"完全可以去掉，不影响逻辑。

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