能否使用NuxtLink链接至components目录下的Vue组件而非页面路由？

你提到的问题其实是Nuxt路由机制和Vue CLI的核心差异导致的——Nuxt采用约定式路由，会自动根据pages目录的结构生成路由规则，而components目录下的组件仅作为复用单元，不会被注册为路由页面，所以NuxtLink自然无法直接指向它们。下面给你几个实用的解决方案，按需选择：

方案1：给表单组件套一个页面壳（最贴近Vue CLI的跳转体验） #

这是最直接的替代方案，把你封装好的表单组件放到pages目录下的一个专属页面中，通过NuxtLink跳转这个页面即可，表单的核心逻辑依然在components里复用：

1. 首先在pages目录下创建表单页面，比如pages/forms/ContactForm.vue：

<template>
  <div class="form-page">
    <!-- 引入你在components里封装好的表单组件 -->
    <ContactFormComponent />
  </div>
</template>

<script>
import ContactFormComponent from '~/components/forms/ContactFormComponent.vue'

export default {
  components: {
    ContactFormComponent
  }
}
</script>

2. 在其他页面中用NuxtLink跳转这个表单页面：

<template>
  <div>
    <NuxtLink to="/forms/contact-form">
      <button>打开联系表单</button>
    </NuxtLink>
  </div>
</template>

这样既保留了表单组件的复用性，又符合Nuxt的路由规则，多个页面都可以通过这个链接调用同一个表单。

方案2：在当前页面动态加载表单（无需页面跳转） #

如果不需要跳转到新页面，只是想在当前页面展示表单，可以用动态组件或弹窗的方式，这样体验更流畅：

1. 在页面中引入表单组件，通过状态控制显示：

<template>
  <div>
    <button @click="showForm = true">打开表单</button>
    
    <!-- 弹窗形式的表单 -->
    <div v-if="showForm" class="form-modal">
      <ContactFormComponent @close="showForm = false" />
    </div>
  </div>
</template>

<script>
import ContactFormComponent from '~/components/forms/ContactFormComponent.vue'

export default {
  components: {
    ContactFormComponent
  },
  data() {
    return {
      showForm: false
    }
  }
}
</script>

这种方式不需要额外配置路由，表单组件可以在任意页面复用，适合快速填写的场景。

方案3：自定义路由配置（进阶） #

如果你不想受限于pages目录的自动路由，可以在nuxt.config.js中手动配置路由，把表单组件直接映射为路由页面（Nuxt 2和3都支持）：

以Nuxt 2为例，修改nuxt.config.js：

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'contact-form',
        path: '/contact-form',
        component: resolve(__dirname, 'components/forms/ContactFormComponent.vue')
      })
    }
  }
}

之后就可以用NuxtLink to="/contact-form"直接跳转了。不过这种方式会打破Nuxt约定式路由的便利性，除非有特殊需求，一般不推荐。

总结一下：推荐优先用方案1（页面壳）来保持跳转体验一致，或者方案2（动态加载）来优化交互，方案3作为特殊场景的补充。

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