基于 Vue Router 構(gòu)建單頁面應(yīng)用項目骨架
今天開始，學(xué)院君將花幾個篇幅的教程給大家快速過一下如何基于 Laravel 框架進行單頁面應(yīng)用開發(fā)。
一、初始化項目和前端依賴
開始之前，先通過如下步驟初始化一個新的 Laravel 項目作為單頁面應(yīng)用演示項目：
// 1、初始化 Laravel 項目
laravel new demo-spa
// 2、安裝 laravel/ui 擴展包
cd demo-spa
composer require laravel/ui
php artisan ui vue
// 3、安裝 & 編譯前端依賴
npm install && npm run dev
二、安裝 Vue Router 和 Vuex
要基于 Vue 框架構(gòu)建單頁面應(yīng)用，Vue Router 和 Vuex 是不可或缺的前端依賴庫，前者是 Vue 官方提供的前端頁面路由管理器，后者是 Vue 官方提供的前端組件狀態(tài)（數(shù)據(jù)）管理器。關(guān)于這兩個依賴庫的語法細節(jié)這里不展開了，你可以參考對應(yīng)的官方文檔或者網(wǎng)上視頻進行更深入的了解。
我們可以在 demo-spa 項目根目錄下通過如下命令安裝這兩個前端依賴：
npm install vue-router vuex --save-dev
安裝完成后，就可以在 resources/js/app.js 中引入并使用它們了，以 Vue Router 為例，我們可以在 resources/js 目錄下新建一個 routes.js 作為前端路由文件，然后在 app.js 中這樣通過 Vue Router 引入前端路由：
window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './routes';
Vue.use(VueRouter);
...
const app = new Vue({
el: '#app',
router: new VueRouter(routes)
});
三、編寫前端頁面組件
為了演示前端路由的使用，我們先在 resources/js/components 目錄下新建兩個頁面組件 Home.vue：
<style scoped>
</style>
<template>
<h1>Home Page</h1>
</template>
<script>
export default {}
</script>
和 About.vue：
<style scoped>
</style>
<template>
<h1>About Page</h1>
</template>
<script>
export default {}
</script>
四、編寫前端路由導(dǎo)航
接下來，我們在前端路由文件 resources/js/routes.js 中編寫幾個測試路由：
export default {
mode: 'history',
routes: [
{
path: '/',
component: require('./components/Home').default
},
{
path: '/about',
component: require('./components/About').default
}
]
}
這里我們使用了 HTML5 History 模式 在不同前端路由之間實現(xiàn)頁面無刷新切換。
五、在 HTML 視圖中渲染前端路由導(dǎo)航
做好上述準備工作后，就可以在 HTML 視圖模板中通過如下方式渲染通過 Vue Router 路由匹配到的前端頁面組件了：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">
</head>
<body class="antialiased">
<div id="app">
<!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>
<hr>
<!-- 使用 router-link 組件來導(dǎo)航 -->
<!-- 通過傳入 `to` 屬性指定鏈接 -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
六、測試前端路由導(dǎo)航組件渲染
運行 npm run dev 重新編譯前端資源，在運行 php artisan serve 啟動 Web 服務(wù)器，在瀏覽器中訪問 http://127.0.0.1:8000/，即可看到默認渲染的 Home 頁面：
點擊「About」鏈接，即可切換到 About 頁面：
這樣，我們就基于 Vue Router 構(gòu)建起了一個非常簡單的單頁面應(yīng)用項目骨架。下篇教程我們將通過對頁面組件進行布局來構(gòu)建更加復(fù)雜的單頁面應(yīng)用。
本系列教程首發(fā)在Laravel學(xué)院（laravelacademy.org），你可以點擊頁面左下角閱讀原文鏈接查看最新更新的教程。