我有一个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.
此错误使我在渲染生产页面时遇到麻烦。如何解决这个错误?谢谢!