Laravel 5.5+Vue.js 2.0自定义路由无法渲染视图问题求助

问题原因 #

你遇到的核心问题是路由优先级冲突：

• 当从主页点击"Display Items"时，是Vue Router的前端跳转，不会发送新的HTTP请求到Laravel，所以Vue能正常渲染DisplayItem组件，再通过axios请求后端接口拿数据。
• 但直接访问example.com/items时，请求会先到达Laravel后端，而你定义的返回JSON的/items路由会优先匹配，直接返回数据，没有加载包含Vue实例的页面，自然没法渲染Vue视图。

解决方案：分离API路由与SPA入口路由 #

我们需要把后端API和前端SPA的路由明确分开，让Laravel为所有前端路由返回Vue的入口页面，同时把API请求指向专门的前缀路径。

1. 调整Laravel的API路由

把返回JSON的接口路由移到routes/api.php（或者给它加上/api前缀），这样API的访问路径变成/api/items：

// routes/api.php
use App\Models\Items;

Route::get('/items', function() {
    $items = Items::all();
    return response()->json($items);
});

// 如果有delete接口，也要对应调整前缀
Route::delete('/items/{id}', function($id) {
    // 你的删除逻辑
    return response()->json(['success' => true]);
});

2. 更新Vue组件的请求地址

修改DisplayItem.vue里的axios请求路径，指向新的API地址：

<script>
export default {
    data(){
        return{
            items: []
        }
    },
    created: function() {
        this.fetchItems();
    },
    methods: {
        fetchItems() {
            // 修改为/api/items
            this.axios.get('/api/items')
            .then(response => {
                this.items = response.data;
            });
        },
        deleteItem(id) {
            // 修改为/api/items/+id
            let uri = '/api/items/'+id;
            // 这里修正splice的问题：id不一定是数组索引，用filter更可靠
            this.items = this.items.filter(item => item.id !== id);
            this.axios.delete(uri);
        }
    }
}
</script>

3. 添加Laravel的SPA Catch-All路由

在routes/web.php的最底部添加一个通配符路由，让所有未匹配到后端路由的请求，都返回Vue的入口页面（假设你的入口视图是resources/views/app.blade.php，也就是包含Vue挂载点的页面）：

// routes/web.php
// 先保留你的其他web路由（比如主页路由）
Route::get('/', function () {
    return view('app');
});

// 最后添加这个通配符路由
Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

原理说明 #

当你直接访问example.com/items时：

1. HTTP请求到达Laravel，因为没有匹配到/items的web路由（我们把API移到了/api/items），所以会触发最后的通配符路由，返回包含Vue实例的页面。
2. Vue加载完成后，Vue Router会读取当前路径/items，渲染对应的DisplayItem组件。
3. 组件通过axios请求/api/items获取数据，正常渲染页面内容。

这样不管是前端跳转还是直接访问，都能正常显示Vue视图了。

内容的提问来源于stack exchange，提问作者M Uzair Qadeer