通過 Laravel 創建一個 Vue 單頁面應用（一）

  • 2019 年 12 月 18 日
  • 筆記

使用 laravel 創建一個 Vue 單頁面應用 (SPA) 可以構建一個整潔的由 API 驅動的應用。在此教程中，我們將學習如何構建並運行一個以 Vue 路由為前端，laravel 為後端的 SPA 應用。首先我們將注意力集中在編寫每一個小的功能程式碼塊上，然後在後續的教程中，我們再演示如何將 Laravel 作為 API 層而構建一個完整的應用。

一個以 Laravel 為後端的 Vue SPA 應用的基本運行流程如下：

  • 第一個請求觸發服務端的 Laravel 路由
  • Laravel 渲染 SPA 布局
  • 接下來的請求使用 history.pushState API 觸發頁面跳轉而無需重載頁面

Vue router 有兩種模式，分別為 history 模式和默認的 hash 模式。hash 模式使用 URL hash 來模擬一個完整的 URL，這樣就可以使 URL 變化時頁面卻無需重新載入。

我們這裡將要使用 history 模式，也就是說我們需要配置一個 Laravel 路由來匹配所有用戶在 SPA 頁面中可以進入的 URL。舉個例子， 如果用戶在瀏覽器中刷新了 /hello 這個路由，我們 (Laravel) 需要匹配到它並返回對應的 Vue 模板。Vue Router 將會識別該路由並渲染對應的 Vue 頁面組件。

安裝

首先我們會創建一個 Laravel 項目，然後再安裝 Vue 的 NPM 路由包：

laravel new vue-router  cd vue-router    # 當使用 Valet 時，建立項目鏈接  valet link    # 安裝 NPM 依賴，添加 vue-router 包  yarn install  yarn add vue-router # or npm install vue-router

我們已經完成了 Laravel 項目的安裝，而且 vue-router 包也已經就緒。接下來，配置路由，定義一系列路由和組件。

配置 Vue 路由

Vue 路由執行的過程是為 Vue 組件定義一個路由，然後在應用中下面的標籤中渲染:

<router-view></router-view>

router view 是在整個 Vue 應用組件中都生效的。我們暫時回到 APP 組件中。

首先，我們將更新最主要的 JavaScript 文件 resources/assets/js/app.js 以及配置 Vue 路由。將 app.js 中的內容替換成下面這個樣子:

import Vue from 'vue'  import VueRouter from 'vue-router'    Vue.use(VueRouter)    import App from './views/App'  import Hello from './views/Hello'  import Home from './views/Home'    const router = new VueRouter({      mode: 'history',      routes: [          {              path: '/',              name: 'home',              component: Home          },          {              path: '/hello',              name: 'hello',              component: Hello,          },      ],  });    const app = new Vue({      el: '#app',      components: { App },      router,  });

我們需要添加一些文件，但是在這之前，我們來檢查一下 app.js ：

  • 通過  Vue.use() 來導入和安裝 VueRouter 插件
  • 我們導入三個 Vue 組件：
    • App 組件（最外層的應用組件）
    • Hello 組件匹配 /hello 路由
    • Home 組件匹配 / 路由
  • 創建一個新的 VueRouter 對象，來存儲相關配置
  • 通過在 Vue 的構造方法中添加 App 組件，來讓 Vue 知道 App 組件
  • 將 router 常量添加到這個 Vue 應用中，通過 this.$router 和 this.$route 來調用 VueRouter 構造器包含一個路由數組，在這個數組中定義路由的路徑，名稱（類似於 Laravel 的命名路由）和這個路徑對應的頁面組件。

我一般會把路由定義在一個單獨的路由模組中，然後再引入主應用文件，但這裡為了簡便，我會直接在主應用文件（app.js）中定義這些路由。

為了讓 Laravel mix 成功運行，我們需要定義如下三個組件：

mkdir resources/assets/js/views  touch resources/assets/js/views/App.vue  touch resources/assets/js/views/Home.vue  touch resources/assets/js/views/Hello.vue

首先是 App.vue 文件，這是應用的最外層的容器元素。在這個組件中，我們使用 Vue Router 的 <router-link/> 標籤定義一個「頭部」和一些導航：

<template>      <div>          <h1>Vue Router Demo App</h1>            <p>              <router-link :to="{ name: 'home' }">Home</router-link> |              <router-link :to="{ name: 'hello' }">Hello World</router-link>          </p>            <div class="container">              <router-view></router-view>          </div>      </div>  </template>  <script>      export default {}  </script>

App 組件中最重要的標籤是 <router-view></router-view>，其它通過路由匹配到的組件（如 Home 和 Hello）都是在這裡進行渲染的。

下一個需要定義的組件是 resources/assets/js/views/Home.vue：

<template>    <p>This is the homepage</p>  </template>

最後，我們在 resources/assets/js/views/Hello.vue 路徑下定義一個 Hello 組件。

<template>    <p>Hello World!</p>  </template>

我傾向於把復用組件從頁面組件中分離出來，做法是把頁面組件放在 resources/assets/js/views 文件夾下，把復用組件放在 resources/assets/js/components 文件夾下。我通常會這麼做，因為這可以讓我輕鬆地分辨出哪些是可復用的組件，哪些是純頁面組件。

前端頁面做到這些，就已達到運行我們的 Vue 應用所需要的了。接下來，我們需要定義好後端路由和服務端模板。

伺服器端

我們使用帶有 Vue SPA 的 Laravel 應用程式框架，可以很方便的在我們的應用程式中構建服務端 API。我們還可以使用 Blade 渲染應用程式並且通過全局 JavaScript 對象來配置公共環境，我認為這是很方便的。

在本教程中，我們不會去構建一個 API 實例，但是我們將在後續教程中介紹。 這篇文章主要是關於連接 Vue 路由的。

我們在伺服器端要解決的第一件事是定義路由。 打開 routes/web.php 文件並且替換 welcome 路由為一下內容：

<?php    /*  |--------------------------------------------------------------------------  | Web Routes  |--------------------------------------------------------------------------  |  | 你可以在這裡為你的應用程式註冊web路由。 這些  | 路由由RouteServiceProvider載入到一個包含「web」  | 的中間件組中。現在讓我們創建一些很棒的東西！  |  */    Route::get('/{any}', 'SpaController@index')->where('any', '.*');

我們為 SpaController 控制器定義了一個綜合路由，這意味著任何 web 路由都將映射到我們的SPA。如果我們不這樣做, 當用戶發送了一個 /hello 請求時, Laravel 將返回 404 響應.

接下來， 我們需要創建 SpaController  控制器並且定義視圖：

php artisan make:controller SpaController

打開 SpaController 控制器並且輸入以下內容：

<?php    namespace AppHttpControllers;    use IlluminateHttpRequest;    class SpaController extends Controller  {      public function index()      {          return view('spa');      }  }

最後, 輸入以下內容到 resources/views/spa.blade.php:

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <meta http-equiv="X-UA-Compatible" content="ie=edge">      <title>Vue SPA Demo</title>  </head>  <body>      <div id="app">          <app></app>      </div>        <script src="{{ mix('js/app.js') }}"></script>  </body>  </html>

我們定義了必需的 ~#app 元素 ，其中包含了將要呈現的 App 組件，以及根據 URL 所呈現的其他組件。

運行項目

自此， 我們完成了一個使用 Vue 和 Vue Router 的 SPA 應用的基本框架， 接下來讓我們通過運行 JavaScript 讓它顯示出來：

yarn watch # 或 npm run watch

當我們在瀏覽器中輸入對應 URL 時，將會看到如下頁面：

下一步

我們已經建立起了一個使用 Laravel 作為 API 層的 Vue SPA 應用的骨架。但這個應用仍有很多功能需要我們在後續的教程中來實現：

  • 在前端定義一個 404 路由
  • 使用路由參數
  • 子路由
  • 在組件中向 Laravel 發起一個 API 請求
  • 可能還有很多，但我不準備全部列在這裡…

本篇教程通過這些基礎準備工作展示了我們可以輕鬆地使用 Vue Router 來開始一個 SPA 應用。如果你還不熟悉 Vue Router，請查閱 Vue Router 文檔。

進入 Part 2 !

原文地址：https://laravel-news.com/using-vue-router-laravel

譯文地址 ：https://learnku.com/laravel/t/34252

VirMach 便宜 VPS

QNews

QNews