使用 Laravel 构建 Vue SPA

使用 Laravel 构建 Vue 单页面应用程序 (SPA) 是构建干净的 API 驱动应用程序的一种绝佳组合。在本教程中，我们将向您展示如何使用 Vue 路由器和 Laravel 后端来构建 SPA。我们将重点介绍所有必要部分的连接，然后在后续教程中，我们将进一步演示使用 Laravel 作为 API 层。

Vue SPA 如何使用 Laravel 作为后端的主要流程如下：

• 第一个请求命中服务器端的 Laravel 路由器
• Laravel 渲染 SPA 布局
• 后续请求利用 history.pushState API 进行 URL 导航，而无需页面重新加载

Vue 路由器可以配置为使用历史模式或默认的哈希模式，后者使用 URL 哈希来模拟完整的 URL，因此当 URL 发生更改时，页面不会重新加载。

我们将使用历史模式，这意味着我们需要配置一个 Laravel 路由，该路由将匹配所有可能的 URL，具体取决于用户输入 Vue SPA 的路由。例如，如果用户刷新 /hello 路由，我们需要匹配该路由并返回 Vue SPA 应用程序模板。然后，Vue 路由器将确定路由并渲染相应的组件。

#安装

要开始，我们将创建一个新的 Laravel 项目，然后安装 Vue 路由器 NPM 包

laravel new vue-router
cd vue-router
 
# Link the project if you use Valet
valet link
 
# Install NPM dependencies and add vue-router
yarn install
yarn add vue-router # or npm install vue-router

我们已经有了 Laravel 安装和 vue-router NPM 包，准备就绪。接下来，我们将配置路由器并定义几个路由和组件。

#配置 Vue 路由器

Vue 路由器的工作方式是将路由映射到 Vue 组件，然后将其渲染到应用程序中的此标签内

<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 实例，它接受一个配置对象
• 我们通过将 App 组件传递给 Vue 构造函数中的 components 属性，让 Vue 了解 App 组件
• 我们将 router 常量注入到新的 Vue 应用程序中，以便访问 this.$router 和 this.$route

VueRouter 构造函数接受一个路由数组，我们在其中定义路径、名称（就像 Laravel 的命名路由一样）以及映射到路径的组件。

我喜欢将我的路由定义移动到一个单独的路由模块中，然后导入它，但为了简单起见，我们将在主应用程序文件中定义路由。

为了使 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-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 应用程序所需的一切！接下来，我们需要定义后端路由和服务器端模板。

#服务器端

我们利用 Laravel 等应用程序框架与 Vue SPA 相结合，以便构建一个与我们的应用程序一起使用的服务器端 API。我们还可以使用 Blade 渲染我们的应用程序，并通过全局 JavaScript 对象公开环境配置，我认为这很方便。

在本教程中，我们不会构建 API，但我们将在后续教程中进行构建。这篇文章只是关于连接 Vue 路由器。

我们将在服务器端首先处理的是定义路由。打开 routes/web.php 文件，并将欢迎路由替换为以下内容

<?php
 
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
 
Route::get('/{any}', 'SpaController@index')->where('any', '.*');

我们定义了一个通配路由到 SpaController，这意味着任何 web 路由都将映射到我们的 SPA。如果我们没有这样做，并且用户向 /hello 发出请求，Laravel 会返回 404 错误。

接下来，我们需要创建 SpaController 并定义视图

php artisan make:controller SpaController

打开 SpaController 并输入以下内容

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}

最后，在 resources/views/spa.blade.php 中输入以下内容

 
<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 元素，该元素包含 Vue 将渲染的 App 组件，以及根据 URL 渲染相应的组件。

#运行应用程序

使用 Vue 和 Vue 路由器构建 SPA 的基础已经到位。我们需要构建或 JavaScript 来测试它

yarn watch # or npm run watch

如果您在浏览器中加载应用程序，您应该看到类似以下内容

#展望未来

我们有了 Vue SPA 的框架，我们可以开始使用 Laravel 作为 API 层来构建它。这个应用程序还有很多需要改进的地方，我们将在后续教程中介绍

• 定义前端通配 404 路由
• 使用路由参数
• 子路由
• 从组件向 Laravel 发出 API 请求
• 可能还有更多我这里没有列出的内容……

本教程的目标是为您奠定基础，向您展示使用 Vue 路由器启动 SPA 是多么容易。如果您不熟悉它，请查看 Vue 路由器文档

现在，让我们继续 第 2 部分！