2

我的 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-link：

组件/布局/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 参数定义：

页面/解决方案/_slug.vue

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

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

谢谢

4

2 回答 2

2

在 v2.13 版本之后，Nuxt 可以在模板中使用时自动导入您的组件。检查nuxt.config.jsif components 属性是否为真，那么您不需要在 .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>

注意：对于根组件/components/nav.vue，我们必须使用 CammelCase <Nav/>，如果我们这样调用这个组件，<nav/>它就不起作用。

于 2020-08-06T08:46:13.037 回答
1

问题可能与上述任何内容无关。

首先，检查您的配置是否正确。我看到您正在使用“nuxtjs/content”模块，因此您可能也在使用 Contentful。过去，由于我用于存储变量的“dotenv”模块安装不正确，我遇到过类似的情况（“无法安装组件：模板或渲染函数未定义”问题）。

就我而言，应用程序没有从 .env 文件中加载变量。结果，他们去不明身份的 Contentful 客户端，导致 js 错误。由于某种原因，此错误并不总是出现在控制台中。反而出现了上面提到的Warn。

确保您正确安装了“dotenv”模块（如果您使用它）。我记得在我的情况下，有必要安装“nuxtjs/dotenv”而不是通常的 dotenv。

让我知道是否是这种情况。祝你好运

于 2020-08-07T07:18:29.753 回答