Question

我正在创建一个简单的laravel和vuejs CRUD应用程序。 Vue路由不起作用，我对vuejs很陌生；请看代码以下是web.php的代码

    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');

以下是app.js的代码

    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');

这是我的刀片模板的代码，当我浏览http://localhost:8000/vue时，将渲染此视图。如您在上面的web.php代码中所见。我还可以在控制台中看到通知，您正在开发模式下运行Vue。部署生产时，请确保打开生产模式。

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

但是当我使用

运行应用程序时

    php artisan serve

并浏览到

    http://localhost:8000/posts

应用程序显示404错误。请帮助我解决这个问题。

Answer 1

您需要为在route.php / web.php文件中使用app.js（vuejs）的视图添加laravel路由。

Route::get('/route-name/?{name}', function(){
    return redirect('vue_app');
})->where('name', '[A-Za-z]+');

然后必须将laravel路由用作vuejs路由的父路由，并使用如下所示的url，

http://localhost:8000/laravel-route/view-route

在您的情况下，

http://localhost:8000/route-name/posts

或者您也可以使用

Route::get('{any}', function () { 
    return view('vue_app'); 
})->where('any', '.*');

，而不是先前使用的localhost:8000/posts

Answer 2

尝试此操作到您的web.php路线

SELECT bhk.u_manager, leaderboard.total_pts 
from bhk LEFT JOIN leaderboard 
on bhk.u_id=leaderboard.u_id 
LEFT JOIN league_members ON leaderboard.u_id  = league_members.l_id
WHERE league_members.l_id=1;

Answer 3

对于您的第二部分问题，您应该使用<div>而不是<section>，并且必须将主/注册组件放入刀片文件中id="app"选择的html元素的内部。就您而言，

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

希望这对您有所帮助。您可以检查此basic vuejs with laravel

PS：您应该在两个不同的帖子中问两个不同的问题。

Answer 4

如果使用 {any} 不起作用，您也可以尝试添加 ?

Route::get('/any-your-route/{any?}', function() {
  return view('your-view');
})->where('any', '.*');

希望对你有帮助。我只是尝试使用此代码并使用 vue 路由器处理 laravel 刀片模板。在 Laravel 8

上测试

Answer 5

你可以简单地这样做。

Route::get('/{vue_capture?}', function(){
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');

如何结合Laravel和Vue路线

5 个答案: