Vue跳转新页面从MySQL取数据失败报500错误求助

首先看你写的<a>标签里的URL，这里明显有格式问题：

<a :href="'http://localhost:8090/articlePage.html?articlePage?id='+item.ID" ...>

这个URL的参数部分写错了——?是用来分隔路径和查询参数的，你这里写成了?articlePage?id=，相当于把articlePage?id当成了一个参数名（没有值），真正的id参数被错误嵌套了，后端肯定没法正确解析这个参数，这大概率是导致500错误的直接原因。

第一步：修正URL参数格式 #

把href改成正确的格式，直接传递id参数即可：

<article v-for='item in dataGroup'> 
  <a :href="'http://localhost:8090/articlePage.html?id='+item.ID" :name='pageId' target="_blank"> 
    <h4>{{item.title}}</h4>
    <!-- 其他内容 -->
  </a>
</article>

另外注意target="__blank"应该是target="_blank"（单下划线），不过这个不影响500错误，只是规范问题。

第二步：排查后端接收逻辑 #

如果修正URL后还是500，那就要看后端代码：

• 检查是否正确获取id参数：比如在处理articlePage.html的后端逻辑里，有没有正确从请求中拿到id参数（比如Java里用request.getParameter("id")，PHP里用$_GET['id']等）。
• 检查SQL查询语句：比如根据id查询文章的SQL是否正确，有没有拼写错误，有没有处理id为空或者非数字的情况（比如用户篡改URL参数输入非数字，导致SQL报错）。
• 检查异常处理：后端有没有捕获可能的异常（比如查询不到对应ID的文章、数据库连接错误等），如果没有捕获，就会直接返回500错误。

第三步：查看服务器错误日志 #

500错误的核心原因都在服务器日志里，找到你服务器的日志文件（比如Tomcat的logs/catalina.out，Nginx的error.log），查看具体的异常信息，比如是SQL语法错误、空指针异常还是权限问题，根据日志信息就能精准定位问题。

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