Laravel+Vue开发中API路由执行顺序问题咨询

你遇到的现象完全符合Laravel+Vue SPA架构的默认运行逻辑——Laravel后端路由和Vue Router前端路由是两套完全独立的匹配体系，职责边界非常清晰，直接访问/api/edit时的执行顺序如下：

• 浏览器向Laravel服务发起完整的页面HTTP请求，此时还没有加载任何前端静态资源，Vue应用根本没有启动。
• Laravel收到请求后先做路由匹配：routes/api.php中定义的路由会自动挂载/api前缀，你写的Route::get('/edit', ...)实际匹配的请求路径就是/api/edit，请求直接命中SurveyController@edit方法。
• 控制器执行业务逻辑后返回结构化的JSON数据，Laravel直接将这个JSON作为HTTP响应返回给浏览器，请求生命周期在后端就已经结束。
• 浏览器收到的响应是纯JSON文本，既没有包含Vue挂载需要的<div id="app"></div>DOM节点，也没有加载编译后的app.js前端脚本，自然不会启动Vue实例、执行Vue Router路由匹配、渲染Vue组件。

你在Vue Router中定义的/edit是前端路由，要触发Vue页面渲染，需要走以下流程：

1. 首先需要在Laravel的routes/web.php文件最末尾添加兜底路由，所有非接口、非静态资源的GET请求，统一返回挂载Vue应用的入口模板（模板内需要包含<div id="app"></div>节点，以及引入前端编译后的js、css资源），参考代码：

// 注意：必须放在web.php所有其他路由的最后面
Route::get('/{any}', function () {
    return view('app'); // 替换成你自己的入口blade模板名
})->where('any', '.*');

2. 当你在浏览器访问http://127.0.0.1:8000/edit时，请求不会匹配api.php中的接口，会命中上面的兜底路由，返回包含Vue入口的HTML页面。
3. 浏览器解析HTML后加载执行app.js，启动Vue实例、初始化Vue Router。Vue Router会自动读取当前浏览器地址栏的路径/edit，匹配到你在router.js中定义的edit路由，渲染SurveyShow.vue组件。
4. 组件渲染完成后触发mounted生命周期钩子，自动通过axios发起/api/edit的异步请求拿到JSON数据，赋值给组件内的categories变量，最终渲染出你写的表格页面。

• 所有/api/*前缀的路径本来就是设计用来给前端异步调用传数据的，直接访问拿到JSON是正常表现，不是代码错误。
• 你当前代码中SurveyShow.vue里的<router-link>指向了名为categoryAdd的路由，但router.js中没有定义对应路由，点击时会报路由不存在的错误，需要补充对应路由配置。
• Vue Router的history模式必须配合后端的兜底路由使用，否则直接访问前端路由路径会出现404错误。

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