Laravel Vue.js - 如何在 axios URL 中使用刀片语法答案

【问题标题】：Laravel Vue.js - how to use blade suntax in axios URLLaravel Vue.js - 如何在 axios URL 中使用刀片语法
【发布时间】：2020-04-12 02:03:04
【问题描述】：

在我的 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.vue 中的Register 组件在@ 中的<register-view></register-view> 的位置呈现987654344@ 文件。 Register.vue中相关的axiosajax部分之前已经给出。

EDIT2：

在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>

【问题讨论】：

标签： laravel vue.js axios laravel-blade

【解决方案1】：

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

【讨论】：

'在谷歌文档中写出我所有的 Laravel API 路由' - 你如何在这里使用谷歌文档？
打开一个谷歌文档空白页，列出你所有的 Laravel API 路由。
文档并没有真正发挥多大作用，不是吗？您是否以任何方式在路由器文件中列出了所有这些内容？
这只是一个偏好问题。在谷歌文档中，它们可以更简洁、更易于阅读。你可以做你喜欢的事！
如果有帮助，您介意将我的答案标记为顶部吗？

【解决方案2】：

没有.blade 文件就无法做到这一点。不支持 vue 组件动态使用 laravel 路由。但是您可以使用一些第三方软件包来实现此目的，例如 Ziggy

https://github.com/tightenco/ziggy

【讨论】：

vue 组件位于app.blade.php 中。见“EDIT2”
@IstiaqueAhmed 如果您使用刀片，您可以使用{!! route('register') !!}。但我假设根据您的代码，您正在使用 vue 组件并在 vue 组件中调用 php route('register') 不起作用。对于 vue 组件，您可以使用上述插件。
@IstiaqueAhmed 也尝试使用{!! route('register') !!} 而不是{{ route('register') }}

【解决方案3】：

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

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

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

【讨论】：

我不建议这样做。这很快就会变得混乱。
我完全同意，但这是解决问题的一种方法
作为程序员，我们不应该简单地寻找“一种绕过它的方法”，我们应该寻找最好的最干净的方式来编写它。