使用 Laravel 开发 SPA 时， Routing 的正确姿势

缘起

通常开发一个 SPA 的起手式是新建两个工作目录：一个 client 目录用于存放前端源代码，一个 laravel 目录用于开发 webservices 功能以及后台面板。前后端分离，互不干扰。例如：spa-starter-kit

不过，也有时候我们不想要太多目录，就是想在一个 Laravel 应用中搞定 SPA 和后端功能。这也很简单，Laravel 已经包含了 vue 和 axios，5.4 还有了 webpack，我们还需要引入一个 vue-router ：

yarn add vue-router --dev

新建一个 routes.js ，引入所需的组件，并配置导航：

import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

export default routes

然后在 app.js 里添加路由代码：

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import routes from './routes'
const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  router,
  el: '#app'
})

在 routes/web.php 中为 SPA 添加路由：

Route::get('/', function () {
  return view('app');
});

添加一个 app.blade.php ，用于挂载 Vue 组件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
    <div class="container">
        <router-view></router-view>
    </div>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

到这里，我们便可以通过 http://app.dev/#/ 和 http://app.dev/#/about 分别访问到 Home 和 About 组件。

问题

不管你怎么看，我觉得 hash 模式的 url 真的很丑，并且还会遇到一些坑，例如：http://get.ftqq.com/8572.get
好在 vue-router 还为我们提供了 history 模式，它通过 HTML5 的 history.pushState API 来完成 URL 跳转而无须重新加载页面。让我们修改 app.js 中 router 的定义：

const router = new VueRouter({
  routes,
  mode: 'history'
})

这时候访问 http://app.dev/ ，Home 组件显示，并且没有丑陋的 # 。
然后，问题就来了。还记得吧，我们现在是在一个 Laravel 应用中，这意味着路由需要通过 Laravel 来处理。而我们刚刚只在 routes/web.php 中定义了 / 的路由，这时如果访问 http://app.dev/about 只会得到一个大大的报错。
第一种处理办法是，在 routes/web.php 的结尾处定义一个通用路由：

# Vue
Route::any('{all}', function () {
    return view('app');
})->where(['all' => '.*']);

这是这篇文章推荐的解决方案，但是我不太喜欢这个方法。首先，我需要保证这个定义始终在文件的最后，并且在此之前不要有其他路由定义覆盖 vue-router 中的路由。另外，routes/web.php 其实还有一个作用是应用的文档，我希望能在这个文档中直观的看到应用的所有 url ，包括 SPA 的部分。
那么，引出的一种办法是，为每一个 SPA 处理的路由重复定义一次：

Route::get('/', function () {
  return view('app');
});

Route::get('/about', function () {
  return view('app');
});

这看起来有点笨，view('app') 出镜太多次了，不符合 DRY 原则。

解决

我希望有一种组合定义路由的方式，可以传入一个数组参数，数组中包含的 url 都指向同一个 action。就像这样：

Route::combine([
    '/',
    'about'
], function () {
    return view('app');
});

在翻看 Illuminate\Routing\Router 源代码的时候，发现这货其实是可以使用宏的。唔，那就好办了。在 App\Providers\RouteServiceProvider 的 boot 方法添加宏定义：

public function boot()
{
        Route::macro('combine', function(array $uris, $action)
        {
                foreach ($uris as $uri) {
                        Route::any($uri, $action);
                }
        });
        parent::boot();
}

ok，收工