Je crée une application CRUD laravel et vuejs simple. Vue Routes ne fonctionne pas, je suis assez nouveau dans vuejs; s'il vous plaît voir le code Voici le code pour web.php
http://localhost:8000/posts
Voici le code pour app.js
php artisan serve
Voici le code de ma lame tamplate , lorsque je navigue sur http: // localhost: 8000 / vue , cette vue est rendue. Comme vous pouvez le voir dans le code web.php ci-dessus. Je peux également voir la notification dans la console Vous exécutez Vue en mode développement. Assurez-vous d'activer le mode production lors du déploiement pour la production.
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Vue.js CRUD With Laravel 5 application</h1>
</div>
</header>
</div>
<section id="app">
</section>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Mais lorsque j'exécute mon application en utilisant
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios=require('axios').default;
let AppLayout = require('./components/App.vue');
const Posts = Vue.component('Posts',require('./components/Posts.vue'));
const EditPost =
Vue.component('EditPost',require('./components/EditPost.vue'));
const AddPost =
Vue.component('AddPost',require('./components/AddPost.vue'));
const DeletePost =
Vue.component('DeletePost',require('./components/AddPost.vue'));
const ViewPosts =
Vue.component('ViewPosts',require('./components/ViewPosts.vue'));
const ExampleComponent =
Vue.component('ViewPosts',require('./components/ExampleComponent.vue'));
// Registering routes
Vue.use(VueRouter,VueAxios,axios);
const routes = [
{
name: 'Posts',
path: '/posts',
component: Posts
},
{
name: 'AddPost',
path: '/add-posts',
component: AddPost
},
{
name: 'EditPost',
path: '/edit-post/:id',
component: EditPost
},
{
name: 'DeletePost',
path: '/delete-post',
component: DeletePost
},
{
name: 'ViewPosts',
path: '/view-post',
component: ViewPosts
},
{
name: 'ExampleComponent',
path: '/example-component',
component: ExampleComponent
},
];
const router = new VueRouter({mode: 'history', routes: routes});
new Vue(
Vue.util.extend(
{ router },
AppLayout
)).$mount('#app');
et accédez à
Route::get('/', function () {
return view('welcome');
});
Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/vue','Api\PostController@home');
Route::resource('/api','Api\PostController');
L'application affiche une erreur 404. Veuillez m'aider à résoudre ce problème.
3 Réponses :
Vous devez ajouter une route laravel pour la vue où vous utilisez l'app.js (vuejs) dans le fichier routes / web.php .
Route::get('{any}', function () {
return view('vue_app');
})->where('any', '.*');
et puis vous devez utiliser la route laravel comme route parente pour les routes de vuejs et utiliser l'url comme ci-dessous,
http://localhost:8000/route-name/posts
dans votre cas,
http://localhost:8000/laravel-route/view-route
Ou vous pouvez également utiliser,
Route::get('/route-name/?{name}', function(){
return redirect('vue_app');
})->where('name', '[A-Za-z]+');
et au lieu de l'utilisation précédente localhost: 8000 / posts
Cher, je reçois la même erreur, localhost: 8000 / route-name / posts ai-je besoin changer le app.js? laissez-moi modifier la question pour inclure vue_app.blade.php
pouvez-vous essayer, Route :: get ('{any}', function () {return view ('' vue_app ');}) -> where (' any ','. * '); au lieu de l'itinéraire précédent et utiliser localhost: 8000 / posts l'url directement? Pouvez-vous afficher votre routes.php et votre page d'erreur?
Il fonctionne et redirige vers la lame requise; il n'y a pas d'erreur, mais j'ai de la confusion comme vous pouvez le voir dans mon app.js que j'ai écrit si la demande est pour / post, elle doit rendre le composant Posts, c'est-à-dire Posts.vue, qui n'est pas rendu. Pouvez-vous comprendre le problème?
Frère, j'ai donné une solution à votre deuxième problème dans une autre réponse ci-dessous. S'il te plaît vérifie le. Et ce sera mieux si vous posez deux questions dans un message séparé et que vous devez également accepter cette réponse si cela fonctionne pour votre problème initial. Ensuite, ce sera bénéfique pour d'autres qui pourraient faire face au scénario similaire. Merci
Essayez ceci sur votre route web.php
Route::get('/', function () {
return view('index');
});
Route::get('/{catchall?}', function () {
return response()->view('index');
})->where('catchall', '(.*)');
Pour votre deuxième partie de question ,
Vous devez utiliser J'espère que cela vous aidera. vous pouvez vérifier ce basic vuejs avec laravel PS: Vous devriez poser deux problèmes différents dans deux articles séparés. au lieu de id = "app" dans le fichier lame. dans votre cas, <div id="app">
<app-layout></app-layout>
</div>
dans quel fichier lame vous avez utilisé le app.js pour vuejs?
Je l'utilise dans vue_app.blade.php
J'ai répondu à une solution pour vous. Veuillez me faire savoir si cela a fonctionné pour vous.