vue.js - Nuxt.js 找不到组件，错误为 "Failed to mount component: template or render function not defined."

Question

我的 Nuxt.js 网站遇到问题。 我定义了一个带有动态 slug 参数的页面，如下所示:

/solutions/:slug

如果我直接在浏览器中访问该页面，它会正确加载! 但是，如果我单击 NavBar 组件中的 nuxt-link，我会在控制台中收到以下错误，并且页面不会加载:

vue.runtime.esm.js?2b0e:619

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

我有一个如下所示的默认布局文件:

布局/default.vue

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

<script>
import NavBar from "~/components/Layout/NavBar"

export default {
  components: {
    NavBar,
  },
}
</script>

我的导航栏包含以下 nuxt 链接:

组件/布局/NavBar.vue

<template>
  <b-navbar wrapper-class="container" fixed-top>
    <template slot="end">

      <nuxt-link
        :to="{
          name: 'solutions-slug',
          params: { slug: 'performance' },
        }"
        class="navbar-item"
        target="self"
      >
        <span class="icon is-medium">
          <i class="ic ic--larger ic-b1-graph-bars-chart-rise" />
        </span>
        <span class="label">
          Performance
        </span>
      </nuxt-link>

    </template>
  </b-navbar>
</template>

我有一个页面，由 slug 参数定义:

pages/solutions/_slug.vue

<template>
  <div class="solution">
    This is my solution page.
  </div>
</template>

我试图理解为什么单击 nuxt-link 无法加载页面，即使我在浏览器中正确地看到了 URL 更改。

谢谢

Answer 1

v2.13版本之后，Nuxt可以在模板中使用时自动导入您的组件。 检查nuxt.config.js如果 Components 属性为 true，那么您不需要在 .vue 文件中导入组件。

在你的layouts/default.vue中删除脚本标签;-)

<template>
  <div>
    <NavBar />
    <Nuxt />
  </div>
</template>

如果您需要按文件夹对组件进行分类，请执行以下操作。

转到nuxt.config.js并更改组件属性

export default {
  components: {
    dirs: [
      '~/components',
      {
        path  : '~/components/site/',
        prefix: 'Site'
      },
      {
        path  : '~/components/admin',
        prefix: 'Admin'
      },
      {
        path  : '~/components/admin/sub',
        prefix: 'AdminSub'
      }
    ]
  }
}

例如，我们有以下组件:

components
  | site
     - header
  | admin
     - header
     - footer
     | sub
        - header
        - footer

当我们需要调用组件时，只需用破折号或驼峰式分隔前缀和组件名称即可。

在你的layouts/default.vue中删除脚本标签;-)

<template>
  <div>

   <!-- with dash -->
   <site-header></site-header>
   <admin-header></admin-header>
   <admin-sub-header></admin-sub-header>


   <!-- cammel -->
   <SiteHeader></SiteHeader>
   <AdminHeader></AdminHeader>
   <AdminSubHeader></AdminSubHeader>

  </div>
</template>

Attention: For Root Components /components/nav.vue, We Must Use CammelCase <Nav/> and if we call this component like this <nav/> it doesn't work.