Vue应用运行时Home组件在页面重复渲染两次，该如何解决？

常见触发原因及解决方法 #

• 检查入口文件（通常是App.vue）是否同时存在手动引入的<Home />组件和<RouterView>路由出口：如果App.vue中已经手动写了Home组件的引入和调用，同时默认路由/配置的组件也是Home，路由出口会再渲染一次Home，直接删除App.vue中手动写的<Home />调用即可。
• 检查路由配置文件（通常是router/index.js）是否重复注册了指向Home组件的同路径路由：如果有两条path完全一致的路由规则都指向Home组件，删除重复的路由配置即可。
• 检查Home.vue自身代码是否存在递归调用：如果Home组件内部又写了<Home />标签调用自己，就会出现嵌套渲染，删除自身调用的代码即可。
• 检查Home组件外层的条件渲染逻辑：如果存在v-if/v-else分支判断逻辑错误，导致两个分支同时渲染Home组件，修正判断条件即可。
• 检查是否开启了Vue开发环境的严格模式：如果项目在main.js中配置了严格模式相关参数，开发环境下会触发两次组件挂载来检测副作用，属于正常情况，生产环境会自动恢复为单次渲染。

相关参考截图 #

首页运行效果截图 #

Home.vue代码截图 #

内容的提问来源于stack exchange，提问作者Teshie Ethiopia