Re: 從零開始的 Laravel SPA 之旅 (二)
在上一篇文章中，我們瞭解到如何透過 Laravel Mix 來編譯前端檔案。本篇文章中，我們將開始設置 SPA 網站前端以及後端的路由規則。
後端路由
在 SPA 的網站中，我們的路由切換是透過前端來控制，所以後端的路由只需要做一件事情，就是將收到的請求都指定到前端的初始進入頁面。因此，我們在 route/web.php 中加入以下的規則，將所有的請求都導到 index.blade.php 頁面。
Route::get(‘{path}’, function () {
return view(‘index’);
})->where(‘path’, ‘(.*)’);前端路由
前端路由的部分，我們需要使用到 vue-router ，我們先用以下指令來安裝套件。
npm install vue-router — save-dev在設定路由之前，我們先建立一個 App.vue 的檔案：
<template>
<div>
<nav-bar></nav-bar> <router-view></router-view>
</div>
</template>
App.vue 是我們網站的容器元件。我們可以看到裡面有一個 <router-view> 的標籤。這個標籤會根據我們的網址來渲染相對應的頁面元件。也就是說，我們的網頁其實一直都停留在 App.vue 這一個頁面，只是根據不同的網址來改變 <router-view> 裡面的內容。
接著我們建立一個 views 的目錄，我們可以將頁面元件都放在這個目錄底下。這裡我們需要建立兩個檔案，一個是網站進入的歡迎頁面( Home.vue )，一個是任務清單的頁面( Task.vue )。
頁面都準備好後，現在我們可以開始設定我們的路由。首先，我們在 resource/assets/js 裡面新增一個 router 目錄，我們之後跟路由相關的檔案都可以放在這個目錄底下。接著我們在目錄底下新增一個 index.js 檔案，內容如下：
export default new Router({
mode: 'history', // [ 註 ]
routes: [
{
path: '/',
component: Home
},
{
path: '/task',
component: Task
},
]
});在路由設定中，我們建立了兩個路徑，分別對應歡迎頁面跟任務清單頁面。這樣就完成了路由設定，當用戶進入網站，vue-router 會根據網址來載入相對應的頁面元件。
既然網頁中的頁面切換只是透過載入不同頁面元件，那我們在網站中頁面的切換就不能夠使用過去的 <a> 標籤。在這裡，vue-router 提供了 <router-link> 標籤，使用的方式跟 <a> 標籤差不多，只要在 to 屬性中填入要跳轉的路徑就可以。範例如下：
<!-- 切換到歡迎頁面 -->
<router-link to="/">Home</router-link><!-- 切換到任務清單頁面 -->
<router-link to="/task">Task</router-link>
現在我們的路由設定完成，我們可以在歡迎頁面跟任務頁面間切換。在下一篇文章中，我們將開始實作任務頁面的功能。
註：vue-router 預設使用 hash 來模擬網址變更，也就是說 vue-router 模擬的網址中會帶著 # 符號。如果改成 history 模式，就會使用 history.pushState API 來實現網址變更，這樣我們就可以擁有一個乾淨的網址。
github 完整範例
在此系列文中的所有程式碼都會放置於底下的 github 專案
