Laravel Vue.js - 如何在 axios URL 中使用blade suntax

Question

在我的 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来自网络选项卡。

如何在axios ajax 请求中使用route('register')作为 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 ， Register在组分Register.vue中的地方呈现<register-view></register-view>在App.vue文件中。 Register.vue相关的axios ajax部分之前已经给出。

编辑2：

在RegisterController内部，我转到use RegistersUsers trait 思想 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>

Answer 1

不幸的是，您不能在 Vue 中使用刀片语法，除非您直接在刀片模板中编写 Vue 代码，这不是最佳实践。 我发现有帮助的一件事是在谷歌文档中写出我所有的 Laravel API 路由，以便在 Vue 中引用它们时更容易引用它们。 我希望这有帮助！

Answer 2

如果没有.blade文件，就无法做到这一点。 不支持 vue 组件动态使用 laravel 路由。 但是你可以使用一些第三方包来实现像Ziggy这样的东西

https://github.com/tightenco/ziggy

Answer 3

如果您在.blade文件中，则只能使用刀片语法。

调用 API 时必须静态设置此路由或其他路由

不推荐：或者您可以在“主”刀片文件中定义一个 js 变量，然后在Register.vue文件中使用该变量。

Laravel Vue.js - 如何在 axios URL 中使用blade suntax

问题描述

3 个解决方案

解决方案1
0 2019-12-19 13:08:48

解决方案2
0

解决方案3
-2 2019-12-19 13:08:17

Laravel Vue.js - 如何在 axios URL 中使用blade suntax

问题描述

3 个解决方案

解决方案1 0 2019-12-19 13:08:48

解决方案2 0

解决方案3 -2 2019-12-19 13:08:17

解决方案1
0 2019-12-19 13:08:48

解决方案2
0

解决方案3
-2 2019-12-19 13:08:17