Laravel Vue.js -如何在axios中使用刀片阳光税
在我的Laravel + Vue.js SPA (单页应用程序)中，我使用axios作为HTTP来发出POST请求。在Vue组件即Register.vue中，我有：
axios.post('@{{ route("register") }}',
this.name, // the data to post
{ headers: {
'Content-type': 'application/json',
}
})
.then(response => {
this.result = response.data.bpi
})
.catch(error => {
console.log(error)
this.errored = true
});但是Firfox浏览器控制台在发出请求时显示404错误，而axios试图发出请求的URL显示为来自网络选项卡的http://127.0.0.1:8000/@%7B%7B%20route(%22register%22)%20%7D%7D。
如何使用route('register')作为axios ajax请求中的URL？
编辑：
如果您对该应用程序的体系结构感到好奇，我将在下面详细说明：
app.js文件有：
window.axios = require('axios');
import router from './router';
import App from '../components/App.vue';
var app = new Vue({
el: '#app',
render: h => h(App),
router,
mount(){
console.log("Root instance mounted ");
}
});router.js文件有：
import Register from '../components/Register.vue';
export default new VueRouter({
mode: 'history',
routes: [
{ path: '/register', component: Register, name: 'register' }
],web.php有：
Auth::routes();// it contains login, register etc routes我的App.vue有：
<template>
<div>
<div id="toolbar">
My Toolbar
</div>
<router-view></router-view>
</div>
</template>因此，当命中/register URL时，app.js加载App.vue，并根据router.js中的路径规范，在App.vue文件中以<register-view></register-view>代替Register.vue中的Register组件。axios ajax在Register.vue中的相关部分已经给出过。
EDIT2:
在RegisterController内部，我使用了use RegistersUsers特性IDE导航，并做了以下更改：
public function showRegistrationForm()
{
//return view('auth.register'); //discarded this line
return view('app');
}在assets/views/app.blade.php内部，我有：
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>回答 3
Stack Overflow用户
发布于 2019-12-19 13:08:48
不幸的是，除非您在刀片模板中直接编写Vue代码，否则不能在Vue中使用刀片语法，这不是最佳实践。我发现有一件事很有帮助，那就是在google文档中写出我所有的Laravel路由，这样在Vue中引用它们就更容易了。我希望这能帮上忙！
Stack Overflow用户
发布于 2019-12-19 14:54:43
如果没有.blade文件，就无法做到这一点。不支持vue组件动态使用laravel路由。但是您可以使用一些第三方包来实现这一点，比如Ziggy
Stack Overflow用户
发布于 2019-12-19 13:08:17
只有在.blade文件中才能使用刀片语法。
在调用API时，必须静态地设置此路由或其他路由。
不推荐:或者可以在“主”刀片文件中定义js变量，然后在Register.vue文件中使用该变量。
https://stackoverflow.com/questions/59410309
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号