Vue中Layout跳转Post页面报too much recursion递归错误如何解决？

报错原因 #

你遇到的too much recursion报错核心是组件递归自引用，具体触发点在Post页面的组件命名冲突：

• 你当前pages/Post.vue页面组件自身声明的name属性为Post
• 同时你把引入的src/components/PostComp.vue子组件，也注册成了名为Post的组件
• Vue渲染模板中的<Post />标签时，会优先匹配当前组件自身，导致页面无限渲染自己，触发递归溢出。你删除该组件后报错消失，也完全符合这个问题的特征。

修复方案 #

1. 优先解决命名冲突（必做） #

只需要改掉子组件的注册名即可，修改Post页面的代码：

// 组件注册部分改名，不要用和页面组件name相同的注册名
components: {
  PostComp: Post,
},

对应修改模板部分的组件调用：

<PostComp 
  :description="post.description"
  :title="post.title"
  :author="post.user"
  :date="post.date"
  :tags="post.tags"
  :commentArray="post.comments"
/>

修改后重启项目即可解决递归报错。

2. 其他优化建议 #

• 给getter返回值增加非空判断，避免无匹配数据时页面报错：

const p1 = getters.post.value(route.value.params.id);
if (p1 && p1.length) {
  post.value = {
    // 原有赋值逻辑
  }
}

• 跳转路由后建议清空QSelect的绑定值searchText，避免重复触发watch监听导致多次跳转：

// Layout.vue的watch逻辑中，跳转后加一行清空逻辑
router.push(`/post/${id}`);
searchText.value = null;

内容的提问来源于stack exchange，提问作者J. Mennig