如何解决Nuxt.js项目中NuxtLink无法关联页面与组件的问题？

首先确保你的Contact页面文件位置正确：在Nuxt项目中，页面路由基于pages/目录的文件结构，你需要把Contact页面文件命名为contact.vue并放在pages/目录下，这样Nuxt会自动生成/contact的路由。

修正后的Navbar组件代码 #

<li class="nav-item">
  <NuxtLink to="/contact" class="nav-link click-close">ContactUs</NuxtLink>
</li>

正确的Contact页面代码（需放在pages/contact.vue） #

<template>
    <div>
        <section id="contact">
            <h1>Contact</h1>
        </section>
    </div>
</template>

<script>
export default {
    name: 'contact'
}
</script>

额外检查点 #

• 确认pages/目录存在且被Nuxt正确识别（这是Nuxt默认的页面路由目录）
• 若是Nuxt 3项目，路由规则同样基于文件系统，pages/contact.vue对应/contact路由，NuxtLink用法完全一致
• 可清除浏览器缓存，避免路由缓存导致的页面跳转异常

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