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

  • 原创
  • 发布时间: 1周前
  • 收藏数: 0 / 点赞数: 0 / 阅读数: 3

缘起


通常开发一个 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,收工

评论