Laravel中Vue.js+Axios点击事件URL拼接错误问题

嘿，这问题很常见，就是URL拼接时漏了关键的斜杠！你现在的代码把getMessages和id直接连在一起了，所以才会出现getMessages1这种错误路径，咱们来一步步修复：

1. 直接修复URL拼接 #

在你的请求URL末尾加上斜杠，这样ID就会被正确拼在斜杠后面：

methods:{
    messages:function(id){
        let vm = this;
        this.$http
            .get('messages/getMessages/' + id) // 这里补加斜杠，让ID成为路径参数
            .then(response => {
                console.log(response.data);
                vm.privateMsgs = response.data;
            })
            .catch(function (error) {
                console.log(error.response || error); // 补全错误日志，方便排查问题
            });
    }
}

2. 更优雅的ES6模板字符串写法 #

用ES6模板字符串可以让URL拼接更直观，不容易漏写斜杠，可读性也更强：

methods:{
    messages(id){ // 省略function语法，让代码更简洁
        let vm = this;
        this.$http
            .get(`messages/getMessages/${id}`) // 模板字符串包裹，变量用${}插入
            .then(response => {
                console.log(response.data);
                vm.privateMsgs = response.data;
            })
            .catch(error => { // 箭头函数写法更简洁，也可以直接用this（如果不需要存vm的话）
                console.log(error.response || error);
            });
    }
}

3. 确认Laravel路由配置 #

别忘了确保你的Laravel路由能正确接收这个ID参数，比如在routes/web.php或者routes/api.php里定义：

// 示例：Web路由配置
Route::get('/messages/getMessages/{id}', [App\Http\Controllers\MessageController::class, 'getMessages']);

// 示例：API路由配置
Route::get('messages/getMessages/{id}', [App\Http\Controllers\MessageController::class, 'getMessages']);

这样修改后，请求的URL就会变成你需要的http://{mylink}/messages/getMessages/1啦！

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