使用 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,收工

一点小事居然被我啰嗦了这么长 :disappointed_relieved:
标题是向超哥致敬

本作品采用《CC 协议》,转载必须注明作者和本文链接
Night gathers, and now my watch begins.
本帖由 Summer 于 7年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 7
Summer

为啥会有超神出现 @overture

7年前 评论

@Summer 因为 「XXX的正确姿势」 是跟超哥学来的句式 :sweat_smile:

7年前 评论

按照你组合定义路由的方式,感觉复杂了,两边路由都要写。:joy:

7年前 评论

@Summer 这个 at 功能为啥又坏了。。。

@茄子 :+1:

7年前 评论

@cjjian 我更喜欢清晰声明,不过确实有点累赘,也说明 SPA 的更优雅姿势是前后端项目文件分离 :stuck_out_tongue_winking_eye:

7年前 评论
Huangjunm

受教了

7年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!