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

Question

所以我正在 Laravel 5.3 和 Vue 2 中开发一个 website/webapp。SEO 很重要，所以我想将网站的 frontend/crawable 部分保留在 Laravel + Blade，并且在 Vue 2.0 中只有很小的非必要部分，所以我不必使用 Ajax 来加载页面内容，并允许像 Google 这样的爬虫来爬取和索引地点。（据我所知，Google 会加载 JS，但不会等待 Ajax 加载，所以它是 hit/miss）。

但是，在后端，我想使用 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
    ...

哪个有效。但是，感觉不对。因为视图路由器仍然加载在我的前端（附加 hash/hashbang）。

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

Answer 1

对于遇到此问题的任何人，我无法找到有关为特定链接禁用 VueRouter 的任何信息。我不认为这是可能的，而且，这可能不值得麻烦。

所以我决定 re-write 我的所有代码库都成为 SPA。是时候了，没有理由不这样做。我正在使用 Prerender.io 的自托管服务 pre-rendering 进行 SEO 等

Answer 2

只是为以后大家澄清一些误解。

Google 可以抓取基于 JS 的前端网站而无需 pre-render 或 server-side 渲染。需要注意的是，Google 使用 Chrome 41 来抓取和呈现网站，因此您的 javascript 必须至少足够好地支持 Chrome 41 功能（或至少至少你的 Vue-based 数据需要填充以支持 Chrome 41)。到目前为止，我使用 babel 没有遇到任何问题。

Laravel frontend with my Vue SPA backend

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

但也要回答这个问题，因为有一个网站只有其网站的一部分作为 SPA（也许博客是 SPA 网站，但与 "about us"、"contact us" 等页面（例如，您可能正在部分改造网站，并希望随着时间的推移推出更新的页面，而不是一次处理所有问题）。在这种情况下，您可以指定Vue Router 的特定路由到运行 on，所有其他路由将由 laravel.

处理

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

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

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

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

Disable vue-router for certain routes? Or how to run SPA backend, and non-SPA frontend?

javascript

laravel

single-page-application

vue.js

vue-router