使用Laravel构建Vue单页应用（SPA）
使用Laravel构建Vue单页应用（SPA）是构建简洁的API驱动的应用程序的完美组合。在本教程中，我们将向你展示如何开始和运行使用Vue路由和Laravel后端来构建单页应用。我们将重点放在连接所需的所有组件上，然后在后续的教程中，我们将进一步演示使用Laravel作为API。
Vue SPA使用Laravel作为后端服务的主要流程如下：
- 首先成功请求到服务端的Laravel路由
- Laravel渲染SPA布局
- 之后的请求利用Web API接口history.pushState()进行URL跳转而无需重新加载页面
Vue路由可以配置使用history模式或者是默认的hash模式，默认的hash模式可以使用URL哈希模拟完整的URL，当URL发生变化时页面不会重新加载。
我们将会使用Vue路由的history模式，意味着我们需要配置Laravel的路由，根据用户打开Vue SPA的路径匹配所有可能的URL。举个例子，如果用户刷新/hello路由，我们需要匹配Vue路由并且返回Vue SPA的模板。Vue路由会确定对应的路由并且渲染合适的组件。
安装
laravel new vue-router
cd vue-router
# 链接你的项目如果你使用 Valet
valet link
# 安装 NPM 依赖并且添加 vue-router
yarn install
yarn add vue-router # 或者 npm install vue-router
Laravel项目和vue-router NPM包安装完成后，接下来我们来配置Vue路由和定义几个路由和组件。
配置Vue Router
Vue Router的工作方式是将路由映射到Vue组件中，然后在应用中的这个标签中渲染：
<router-view></router-view>
Vue Router视图位于整个应用的Vue组件的上下文中，一会我们会回到App组件进行操作。
首先，我们去更新主要的JavaScript文件resources/assets/js/app.js，并且配置Vue Router。将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() 来安装和导入Vue Router插件
- 导入三个Vue组件：App组件（应用最外层的组件），Hello组件（映射/hello路由）和Home组件（映射/home路由）
- 创建一个新的Vue Router实例，接受一个配置对象
- 通过Vue的构造函数中的components属性传递给Vue让它知道我们指定的是App这个组件
- 将常量router注入到新的Vue应用中，通过$this.router和$this.route来访问
VueRouter 构造函数接受一个routes的数组，数组中定义了路由的路径、路由的名称（类似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的<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> 标签，当匹配到路由时我们的router（上面创建的VueRouter实例）就会渲染给出的组件（例如Home或者Hello）。
下一个我们需要定义的组件位于 resources/assets/js/views/Home.vue:
<template>
<p>This is the homepage</p>
</template>
最后我们需要定义的Hello组件位于 resources/assets/js/views/Hello.vue:
<template>
<p>Hello World!</p>
</template>
我喜欢将可复用的组件和视图对应的组件分开，视图对应的组件放在resources/assets/js/views文件夹下，可复用的组件放在resources/assets/js/components。这是我的个人习惯，我发现这样做很好因为我可以轻易区分开哪些组件可以复用哪些组件是用于视图的。
就前端而言，我们已经做好运行Vue应用的所有事情了。接下来，我们需要去定义服务端的路由以及服务端的Laravel模板。
服务端
我们利用像Laravel这样的应用框架和Vue单页应用（SPA），以便我们可以构建一个服务端的API来运行应用。我们也可以使用Blade模板渲染我们的应用，并且通过一个全局JavaScript对象来显示环境配置，这在我看来是很方便的。
在这个教程中，我们还不准备构建API，但是我们后续会跟进。这篇文章全部是来讲如何写一个Vue Router。
第一件需要我们处理的事是定义服务端的路由。打开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
命令行创建控制器完成后，将以下内容输入到该控制器当中：
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
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元素，包括Vue渲染时需要的App组件，以及基于URL渲染对应组件。
运行应用
构建基于Vue和Vue Router的单页应用（SPA）已经准备好了。我们需要开始构建或JavaScript来测试它：
yarn watch # or npm run watch
如果你在浏览器加载该应用，你应该可以看到类似以下的内容：
后续
我们已经有一个Vue SPA的整体结构了，接下来可以开始使用Laravel来构建API。这个应用仍然有一些不足我们将在接下来的教程中介绍：
- 在前端定义一个全局404路由
- 使用路由参数
- 子路由
- 在组件中向Laravel发起请求
- 可能还有一些我没有列在这里
本教程的目标是，向你展示如何简单地使用Vue Router 来创建一个单页应用（SPA）奠定基础。如果你不熟悉Vue Router，可以查看Vue Router官方文档。
原文：Building a Vue SPA with Laravel
尝试翻译国外的教程文章，其中涉及到框架的一些概念还不够清楚，在表达上可能存在偏差，在接下来的学习中发现哪里不对的地方再来修改。