Nuxt/Vue应用所有页面正文内容重复渲染两次问题排查求助

所有页面正文重复渲染的问题和BlogPage业务代码无关，是全局布局文件配置错误导致的。
Nuxt框架中<Nuxt />标签是当前路由对应页面内容的渲染出口，布局中每放置一个该标签，就会渲染一次页面正文。你提供的布局代码里，在<FooterDiv />组件后额外多写了一个<Nuxt />，最终渲染顺序就是导航组件→第一遍页面正文→页脚组件→第二遍页面正文，和你观测到的异常现象完全吻合。

打开全局layout布局文件，删除<FooterDiv />下方多余的<Nuxt />标签即可，修复后的布局模板代码如下：

<template>
  <div>
    <NavPage />
    <Nuxt />
    <FooterDiv />
  </div>
</template>

<script>
import NavPage from '../src/components/NavPage.vue';
import FooterDiv from '../src/components/FooterDiv.vue'
export default {
  components: {
    NavPage,
    FooterDiv
  },
}
</script>

修改保存后刷新页面，重复渲染的问题就会消失。

你当前BlogPage的mounted钩子存在逻辑冗余：判断本地不存在user-info缓存时，执行的是跳转到BlogPage本身的操作，属于无意义逻辑，可以直接删除这段代码。如果原本需求是未登录用户不能访问博客页，把跳转目标改为对应的登录页路由即可。

内容的提问来源于stack exchange，提问作者Denise P