Question

我有一个nuxt项目。我想从另一个页面P2链接页面文件夹中的页面P1。页面P1具有一个组件，通过该组件，P2被链接。

P1：

<template>
  <div class="columns">
      <div v-for="(p, index) in story" :key="index">
        <nuxt-link :to="'/post/' +p.slug">
            <MoreStories :story="p"/>
        </nuxt-link>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import MoreStories from '~/components/MoreStories';
export default {
  components: {
    MoreStories
  },
  data() {
    return {
      story: null
    };
  },
  async asyncData() {
    // THIS IS FOR REPRESENTATION PURPOSE ONLY
    const sortedStories = await axios.get(`https://getData/`).then(response => response.data).catch(err => console.log(err));
    return {
      story: sortedStories
    };
  }
};
</script>

MoreStories.vue组件

<template>
    <div v-if="story.authors">
        BY
        <span v-for="(author, index) in story.authors" :key="index" >
        <nuxt-link :to="'/author/' + author.slug">
            {{ author.display_name }}
        </nuxt-link>
        <span v-if="index != story.authors.length -1"> , </span>
        </span>
    </div>
</template>
<script>
export default {
  props: {
    story: {
      type: Object,
      required: true,
      default: null
    }
  }
}
</script>

P2：

<template>
  <div class="columns">
      <div v-for="(p, index) in story" :key="index">
        <nuxt-link :to="'/post/' +p.slug">
            <MoreStories :story="p"/>
        </nuxt-link>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
import MoreStories from '~/components/MoreStories';
export default {
  components: {
    MoreStories,
  },
  data() {
    return {
      story: null
    };
  },
  async asyncData() {
    // THIS IS FOR REPRESENTATION PURPOSE ONLY
    const sortedStories = await axios.get(`https://getDataFromSomeOtherLink/`).then(response => response.data).catch(err => console.log(err));
    return {
      story: sortedStories
    };
  }
  }
};
</script>

项目结构如下：

components/
--| MoreStories.vue
pages/
--| index.vue
--| authors
----| index.vue
--| post
----| index.vue

这里P1是pages / index.vue或pages / post / index.vue，而P2是pages / authors / index.vue

正在使用的组件是MoreStories.vue

即使我们不使用组件，而是将整个组件代码复制到页面本身中，页面仍然无法正常加载。它引发此错误：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

此错误使我在渲染生产页面时遇到麻烦。如何解决这个错误？谢谢！

从nuxt中的组件链接到pages文件夹中的页面

0 个答案: