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