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

Question

In my Laravel + Vue.js SPA ( Single Page Application ), I am using axios as the HTTP client to make the POST request.在我的 Laravel + Vue.js SPA（单页应用程序）中，我使用axios作为 HTTP 客户端来发出POST请求。 In Vue component namely Register.vue , I have :在 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
                    });

But the Firfox browser console shows 404 error when the request is made and the URL to which axios tries to make the request shows to be http://127.0.0.1:8000/@%7B%7B%20route(%22register%22)%20%7D%7D from the network tab.但是 Firfox 浏览器控制台在发出请求时显示 404 错误并且axios尝试发出请求的 URL 显示为http://127.0.0.1:8000/@%7B%7B%20route(%22register%22)%20%7D%7D来自网络选项卡。

How can I use the route('register') as the URL in axios ajax request ?如何在axios ajax 请求中使用route('register')作为 URL？

EDIT:编辑：

In case you are curious to know the architecture of the app, I'll try to elaborate it below :如果您想知道应用程序的架构，我将尝试在下面详细说明：

The app.js file has : 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 ");
  }
});

The router.js file has : router.js文件有：

import Register from '../components/Register.vue';
export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/register', component: Register, name: 'register' }
  ],

The web.php has : web.php有：

Auth::routes();// it contains login, register etc routes

My App.vue has :我的App.vue有：

<template>
    <div>
        <div id="toolbar">
         My Toolbar  
        </div>
        <router-view></router-view>

    </div>
</template>

So when the /register URL is hit, app.js loads App.vue and according to the path specification in router.js , Register component in Register.vue is rendered in the place of <register-view></register-view> in App.vue file.因此，当/register URL被命中， app.js负载App.vue并根据路径规范router.js ， Register在组分Register.vue中的地方呈现<register-view></register-view>在App.vue文件中。 Relevant axios ajax part in Register.vue has been given before. Register.vue相关的axios ajax部分之前已经给出。

EDIT2:编辑2：

Inside RegisterController , I went to the use RegistersUsers trait thought IDE navigation and made the following change:在RegisterController内部，我转到use RegistersUsers trait 思想 IDE 导航并进行了以下更改：

 public function showRegistrationForm()
    {
   //return view('auth.register'); //discarded this line
        return view('app');
    }

Inside assets/views/app.blade.php , I have :在assets/views/app.blade.php ，我有：

<body>

<div id="app"></div>

<script src="{{ asset('js/app.js') }}"></script>

</body>

Answer 1

Unfortunately you cannot use blade syntax within Vue unless you are writing the Vue code directly in the blade template, which would not be best practice.不幸的是，您不能在 Vue 中使用刀片语法，除非您直接在刀片模板中编写 Vue 代码，这不是最佳实践。 One thing I have found helpful is to write out all my Laravel API routes in a google docs so they are easier to refer to when referencing them in Vue.我发现有帮助的一件事是在谷歌文档中写出我所有的 Laravel API 路由，以便在 Vue 中引用它们时更容易引用它们。 I hope that helps!我希望这有帮助！

Answer 2

There is no way of doing this without a .blade file.如果没有.blade文件，就无法做到这一点。 there is no support given for vue components to use laravel routes dynamically.不支持 vue 组件动态使用 laravel 路由。 but you could use some third party packages to achieve this something like Ziggy但是你可以使用一些第三方包来实现像Ziggy这样的东西

https://github.com/tightenco/ziggy https://github.com/tightenco/ziggy

Answer 3

You can only use blade syntax, if you're in a .blade file.如果您在.blade文件中，则只能使用刀片语法。

You have to statically set this route or others when calling a API调用 API 时必须静态设置此路由或其他路由

NOT RECOMMENDED: Or you can define a js variable in your "master" blade file, which you're then using in the Register.vue file.不推荐：或者您可以在“主”刀片文件中定义一个 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