Nuxt3组件内调用navigateTo后页面未正常渲染的问题求助

问题核心 #

地址栏更新但<NuxtPage>未切换，首页与搜索页内容叠加，本质是路由跳转未正确触发Nuxt的页面组件更新，或路由配置、表单行为存在干扰。

解决方案 #

1. 修正路由文件结构

Nuxt依赖约定式路由，确保搜索结果页组件路径匹配路由规则：

• 将term.vue移动到pages/search/[term].vue，Nuxt会自动生成/search/:term的动态路由，保证路由匹配正确。

2. 完全阻止表单默认提交行为

当前仅拦截了回车的默认行为，但表单本身的submit事件仍可能触发浏览器默认提交，干扰客户端路由。修改SearchBar.vue：

<template>
<div class="flex items-center justify-center bg-gray-100 p-3 border-b">
    <form class="bg-teal-500 w-6/12" @submit.prevent="submitForm">
        <input type="text" class="w-full border p-2"
               placeholder="What are you looking for!"
               v-model="searchTerm"
               @keydown.enter="submitForm">
    </form>
</div>
</template>

通过@submit.prevent拦截所有表单提交行为，确保路由跳转是纯客户端行为。

3. 改用useRouter执行路由跳转

替换navigateTo为useRouter的push方法，更直接控制路由行为：

<script setup lang="ts">
const searchTerm = ref('')
const router = useRouter()

async function submitForm() {
    if (!searchTerm.value.trim()) return
    await router.push(`/search/${searchTerm.value}`)
}
</script>

4. 确保页面组件响应路由参数变化（可选）

如果后续遇到路由参数更新但页面未刷新的情况，可在[term].vue中监听路由变化：

<script setup lang="ts">
const route = useRoute()
const term = ref(route.params.term as string)

watch(() => route.params.term, (newTerm) => {
    term.value = newTerm as string
})
</script>

内容的提问来源于stack exchange，提问作者Yasin Yörük