Dans mon SPA Laravel + Vue.js (application à page unique), j'utilise axios comme client HTTP pour effectuer la requête POST . Dans le composant Vue, à savoir Register.vue , j'ai:
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
Mais la console du navigateur Firfox affiche une erreur 404 lorsque la demande est faite et l'URL vers laquelle axios essaie de faire en sorte que la requête soit http://127.0.0.1:8000/@%7B%7B%20route(%22register%22)%20%7D%7D de l'onglet réseau.
Comment puis-je utiliser la route ('register') comme URL dans la requête axios ajax?
MODIFIER:
Si vous êtes curieux de connaître l'architecture de l'application, je vais essayer de l'élaborer ci-dessous:
Le app.js a:
public function showRegistrationForm()
{
//return view('auth.register'); //discarded this line
return view('app');
}
Le fichier router.js a:
<template>
<div>
<div id="toolbar">
My Toolbar
</div>
<router-view></router-view>
</div>
</template>
Ainsi, lorsque l'URL / register est atteinte, app.js charge App.vue et selon la spécification du chemin dans router.js , composant Register dans Register.vue est rendu à la place de App.vue . La partie axios ajax pertinente dans Register.vue a déjà été donnée.
EDIT2:
À l'intérieur de RegisterController , je suis allé au trait use RegistersUsers pensé à la navigation IDE et j'ai apporté la modification suivante:
import Register from '../components/Register.vue';
export default new VueRouter({
mode: 'history',
routes: [
{ path: '/register', component: Register, name: 'register' }
],
À l'intérieur assets / views / app.blade.php , j'ai:
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 ");
}
});
3 Réponses :
Vous ne pouvez utiliser la syntaxe de la lame que si vous êtes dans un fichier .blade .
Vous devez définir statiquement cette route ou d'autres lors de l'appel d'une API
NON RECOMMANDÉ:
Ou vous pouvez définir une variable js dans votre fichier lame "maître", que vous utilisez ensuite dans le fichier Register.vue .
Je ne recommanderais pas de faire cela. Cela peut s'encombrer très rapidement.
Je suis tout à fait d'accord, mais c'est une façon de le contourner
En tant que programmeurs, nous ne devrions pas simplement chercher «une façon de le contourner», nous devrions chercher la meilleure façon la plus propre de l'écrire.
Malheureusement, vous ne pouvez pas utiliser la syntaxe de la lame dans Vue à moins que vous n'écriviez le code de Vue directement dans le modèle de lame, ce qui ne serait pas la meilleure pratique. Une chose que j'ai trouvée utile est d'écrire toutes mes routes d'API Laravel dans un Google Docs afin qu'elles soient plus faciles à consulter lors de leur référencement dans Vue. J'espère que cela aide!
`` écrivez toutes mes routes d'API Laravel dans un document google '' - comment utilisez-vous google docs ici?
Ouvrez simplement une page vierge Google Docs et répertoriez toutes vos routes d'API Laravel.
La documentation ne sert pas vraiment à grand-chose, n'est-ce pas? Vous avez tout cela répertorié dans les fichiers de votre routeur de quelque manière que ce soit?
C'est simplement une question de préférence. Ils peuvent être plus propres et plus faciles à lire dans un Google Docs. Vous pouvez faire ce que vous préférez!
Cela vous dérange-t-il de marquer ma réponse en haut, s'il vous plaît, si cela vous a aidé?
Vous devrez appeler la route de manière statique.
@ L.Fox, pas moyen de l'appeler à la manière de Laravel?
Pas dans VueJs
Il n'y a aucun moyen de faire cela sans un fichier .blade . il n'y a pas de support donné pour les composants vue pour utiliser dynamiquement les routes laravel. mais vous pouvez utiliser des packages tiers pour y parvenir quelque chose comme Ziggy
le composant vue réside dans app.blade.php . Voir 'EDIT2'
@IstiaqueAhmed si vous utilisez Blade vous pouvez faire {!! route ('register') !!} . mais je suppose, d'après votre code, que vous utilisez le composant vue et que vous appelez php route ('register') avec un composant in vue qui ne fonctionnerait pas. pour le composant vue, vous pouvez utiliser le plugin mentionné ci-dessus.
@IstiaqueAhmed essayez également d'utiliser {!! route ('register') !!} au lieu de {{route ('register')}}