利用Laravel + Vue 打造一頁式 SPA

利用Laravel + Vue 打造一頁式 SPA

Laravel-Vue-Router-SPA, 本篇要介紹如何使用Laravel 及 Vue 打造基礎的SPA(Single Page Application)。首先您需要幾個基礎知識:

  • 了解基本的Laravel運作原理(至少需要知道Route)因為Laravel 和 Vue的連結至少要有一個,而這個連結要由路由匹配。
  • 了解ES6語法。因為筆者很懶,所以很多語法會用ES6得簡寫處理,不過會另外說明。
  • 了解基本Vue實例及 Component概念。至少要知道Vue 要怎麼初始化,及Component是什麼。
安裝

在Laravel的專案底下執行:

npm install vue-router --save-dev
使用
  1. resources/assets/js底下新增routes.js,當做控制路由的檔案
    import VueRouter from 'vue-router'; //ES6 Module引入
    
    let routes = [
        {
            path:'/home', //路徑
                  component:require('./components/Home')//Component
        },
        {
            path:'/about',
            component:require('./components/About')
        }//之後新增路由皆可使用{path:'', component:''}
    ];
    
    export default new VueRouter({
        //model :history //因為Vue router 會自動產生hashtag(#),俗果你覺得礙事可以加入這行。
        routes //ES6語法,當key和value一樣時可省略key
    })
  2. resource/assets/js/bootstrap.js註冊,初始化,並告知Vue內有vue-router
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    
    window.Vue = Vue;
    Vue.use(VueRouter);
  3. resource/assets/app.js內注入,把設定好的route.js帶到Vue實例內。ㄅ
    import router from './routes';
    const app = new Vue({
        el: '#app',
        router
    });
  4. resource/assets/js/components 內新增Home.vue, About.vue,當做切換時要更動的Component
    // About.vue
    <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">About Page</div>
    
                        <div class="panel-body">
                            I'm About Page!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            
        }
    </script>
    
    // Home.vue
    <template>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Home Page</div>
    
                        <div class="panel-body">
                            I'm Home Page!
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            
        }
    </script>
  5. 最後在resource/views內新增一個檔案(Home.blade.php),並將Laravel的路由指向他。接著將Vue的路由放入。
    //Home.blade.php
    <!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">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>My Apps</title>
        <link rel="stylesheet" type="text/css" href="/css/app.css">
    </head>
    <body>
        <div id="app">
            <router-link to="/home">Home</router-link>
            <router-link to="/about">about</router-link>
    
            <router-view></router-view>
        </div>
        <script src="/js/app.js"></script>
    </body>
    </html>
    
    //web.php
    Route::get('/', 'HomeController@index')->name(home);
    
    //HomeController.php
    class HomeControler extends Controller
    {
      public function index()
      {
        return view('home'); //帶到home.blade.php
      }
    }
    • router-link 內的to屬性要帶入的是 routes.js內的path
    • router-view 內的內容是 route.jspath對應到的component內容。
  6. 最後啟動Server
    php artisan serve
    //server 127.0.0.1:800

    直接點擊連結或是打開瀏覽器輸入網址,此時應該可以看到以Home.blade.php的畫面為基礎,並出現兩個連結(Home, About),此時點選兩個連結時會出現不同的顯示內容,且URL也會隨著改變!