javascript - 为某些路由禁用 vue-router？或者如何运行 SPA 后端和非 SPA 前端？

Question

所以我在 Laravel 5.3 和 Vue 2 中开发一个网站/网络应用程序。SEO 很重要，所以我想在 Laravel + Blade 中保留网站的前端/可抓取部分，并且只保留一些不必要的小部分在 Vue 2.0 中，所以我不必使用 Ajax 来加载页面内容，并允许像 Google 这样的爬虫来爬网和索引网站。 (据我所知，Google 会加载 JS，但不会等待 Ajax 加载，因此它会命中/未命中)。

但是，在后端，我想使用 Vue 和 VueRouter 进行完全 SPA。

如何最好地将两者分开？

我希望可以通过 /manager 访问我的后端

目前我的解决方案是:

# routes.php

### Laravel/Frontend routes go here (before SPA) ###

Route::get('/manager/{spaPlage?}', ['middleware' => 'auth', function () {
    return view('manager.index');
}])->where(['spaPlage' => '.*'])->name('manager.index');

然后在 Vue 中，我使用:

const routes = [
    { path: '/', name: 'dashboard.index', component: require('./pages/manager/Dashboard.vue') },
    { path: '/categories', name: 'categories.index', component: require('./pages/manager/categories/Index.vue') },
    { path: '/category/:id', name: 'category', component: require('./pages/manager/categories/Category.vue') }
];

const router = new VueRouter({
    routes,
    base: '/manager'
})

const app = new Vue({
    el: '#app',
    router
    ...

哪个有效。但是，它感觉不对。因为 View 路由器仍然加载在我的前端(附加散列/散列)。

那么，有没有更好的方法将我的 Laravel 前端与我的 Vue SPA 后端分开？

Answer 1

只是为了澄清一些对 future 任何人的误解。

Google 可以抓取基于 JS 的前端网站，而无需预渲染或服务器端渲染。需要注意的是，Google 使用 Chrome 41 来抓取和呈现网站，因此您的 javascript 必须至少足够好以支持 Chrome 41 功能(或者至少您的基于​​ Vue 的数据需要进行 polyfill 以支持 Chrome 41)。到目前为止，我在使用 babel 时没有遇到任何问题。

Laravel frontend with my Vue SPA backend

这是倒退的。如果您正在这样做，请不要这样做。 Laravel 应该是你的后端和前端(通过 blade + bootstrap + Vue/react)，或者只是你的后端。 Vue.js 是一个前端框架，不应用作“后端”。你所有的数据库查询、身份验证、计算、电子邮件等都应该由 Laravel 处理。 Laravel 非常适合后端工作，使用 laravel 编写整个 API 并专门将 Vue 用于前端是完全合理的。当然，您可能能够将其组合在一起并以某种方式使其发挥作用，但您不应该这样，而且您只会无缘无故地为自己制造额外的头痛。

但也要回答这个问题，因为有一个网站只有其网站的一部分作为 SPA(也许博客是 SPA 网站，但与“关于我们”完全分开) ，“联系我们”等页面(例如，您可能正在部分改造网站，并希望随着时间的推移推出更新的页面，而不是一次处理所有问题)。在这种情况下，您可以为 Vue 指定特定的路由运行的路由器，所有其他将由 laravel 处理。

Route::get('/DIR/{vue_capture?}', function () {
    return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*');

这将允许 Vue Router 处理 DIR 子目录中的所有内容，但允许其他路由与其并存。

但是如果你的应用程序需要 Vue Router 访问根域，那么就把它放在你的路由文件的最后，因为当路由匹配完成时，它会在第一次匹配后退出。因此，通过将它放在路由文件的末尾，您实际上是将它用作上面未指定的任何路由的“全部捕获”。把它想象成早点回来。