Nuxt. js не удалось найти компонент с ошибками «Не удалось смонтировать компонент: шаблон или функция рендеринга не определены». - PullRequest
Новая
       166

Nuxt. js не удалось найти компонент с ошибками «Не удалось смонтировать компонент: шаблон или функция рендеринга не определены».

1 голос
/ 06 августа 2020

У меня проблемы с сайтом Nuxt. js. Я определил страницу с параметром Dynami c slug , например:

/solutions/:slug

Если я захожу на страницу непосредственно в браузере, она загружается правильно! Но если я щелкну ссылку nuxt в моем компоненте NavBar, я получаю следующую ошибку в консоли, и страница не загружается: 

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>

У меня есть файл макета по умолчанию, который выглядит следующим образом:

макеты / по умолчанию. vue

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

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

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

Моя панель навигации содержит следующую ссылку nuxt:

компоненты / макет / панель навигации . 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-ссылку не удается загрузить страницу, даже если я вижу, что URL-адрес изменяется в браузере правильно.

Спасибо

Ответы [ 2 ]

1 голос
/ 07 августа 2020

Вероятно, проблема не связана ни с чем из описанного выше.

Сначала проверьте правильность вашей конфигурации. Я вижу, вы используете модуль nuxtjs / content, так что вы, вероятно, тоже используете Contentful. В прошлом я сталкивался с подобной ситуацией (проблема «Не удалось смонтировать компонент: шаблон или функция рендеринга не определена») из-за неправильной установки модуля dotenv, который я использовал для хранения переменных.

В В моем случае приложение не загружало переменные из файла .env. Как следствие, они обратились к клиенту Contentful неопознанными и вызвали ошибку js. Почему-то эта ошибка не всегда появлялась в консоли. Вместо этого появилось упомянутое выше предупреждение.

Убедитесь, что у вас правильно установлен модуль dotenv (если вы его используете). Я помню, что в моем случае необходимо было установить nuxtjs / dotenv вместо обычного dotenv.

Сообщите мне, если это так. Удачи

0 голосов
/ 06 августа 2020

После версии v2.13 Nuxt может автоматически импортировать ваши компоненты при использовании в ваших шаблонах. проверьте nuxt.config.js, если атрибут components имеет значение true, тогда вам не нужно импортировать компонент в файлы. vue.

в ваших макетах / по умолчанию. vue remove тег скрипта; -) 

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

Если вам нужно распределить компоненты по папкам, выполните следующие действия.

goto 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

когда нам нужно вызывать компоненты, просто разделяйте префиксы и имена компонентов с помощью da sh или пишите camelcase .

в ваших макетах / по умолчанию. 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>

Внимание: для Root компонентов /components/nav.vue мы должны использовать CammelCase <Nav/>, и если мы назовем этот компонент так <nav/>, он не сработает.

...