如何修改this.$route.query.comment？实现删除评论后自动更新总数

核心问题是你不该依赖路由参数维护实时评论总数——路由参数仅用于初始化，它不是响应式状态容器，直接修改$route.query也不会触发组件更新。正确做法是把评论总数维护成组件自身的响应式变量，具体步骤如下：

1. 用路由参数初始化组件内部变量
   在组件的响应式数据里定义totalComments，把路由传过来的评论数作为它的初始值，而非一直绑定$route.query.comment：

   data() {
     return {
       totalComments: 0,
       // 其他组件变量...
     }
   },
   created() {
     // 初始化总数，转成数字类型避免字符串问题
     this.totalComments = Number(this.$route.query.comment) || 0;
     const temp = { comment: this.totalComments };
     this.tableData = [temp];
     this.tempData = JSON.parse(JSON.stringify(this.tableData));
     
     if (this.totalComments !== 0) {
       this.getCommentsTableData();
     }
   }
   

2. 更新总数时直接修改组件变量
   在getCommentsTableData接口请求成功后，直接更新totalComments，不用修改路由参数：

   async getCommentsTableData() {
     try {
       const response = await // 你的评论列表接口请求
       // 直接更新组件内部的总数变量
       this.totalComments = response.data.commentCount;
       // 同步更新表格里的显示值
       this.tableData[0].comment = this.totalComments;
     } catch (err) {
       // 这里可以加错误提示逻辑
     }
   }
   

3. 删除评论后触发数据更新
   在删除评论的方法里，调用getCommentsTableData重新拉取最新总数；如果删除接口直接返回最新评论数，也可以直接赋值给totalComments：

   async handleDeleteComment(commentId) {
     const deleteRes = await // 你的删除评论接口请求
     // 方式1：重新拉取完整数据更新总数
     this.getCommentsTableData();
     // 方式2：如果删除接口返回最新count，直接赋值
     // this.totalComments = deleteRes.data.newCommentCount;
     // this.tableData[0].comment = this.totalComments;
   }
   

这样修改后，表格会自动响应totalComments的变化，实时显示最新评论总数，无需再依赖路由参数的旧值。

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