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

Posted 2023-02-22

【中文标题】为某些路由禁用 vue-router？或者如何运行 SPA 后端和非 SPA 前端？

【英文标题】：Disable vue-router for certain routes? Or how to run SPA backend, and non-SPA frontend?

【发布时间】：2017-05-24 02:06:02

【问题描述】：

所以我在 Laravel 5.3 和 Vue 2 中开发网站/webapp。SEO 很重要，所以我想在 Laravel + Blade 中保留网站的前端/可抓取部分，并且只保留小的非必要部分在 Vue 2.0 中，我不必使用 Ajax 来加载页面内容，并允许像 Google 这样的爬虫爬取和索引站点。 （AFAIK，谷歌确实加载了 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
    ...

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

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

【参考方案1】：

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

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

Laravel 前端和我的 Vue SPA 后端

这是倒退。如果您正在这样做，请不要这样做。 Laravel 应该是你的后端和前端（通过刀片 + 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 可以访问根域，那么只需将其放在您的路由文件的最后，因为当路由匹配完成时，它会在第一次匹配后退出。因此，通过将其放在您的路线文件的末尾，您实际上是在将其用作任何未在其上方指定的路线的“全部”。把它想象成早点回来。

【讨论】：

澄清一下，我指的是为我的后端 API 使用相同的 Laravel 应用程序，并且只是使用 Vue.js 访问它，而不是专门使用 Vue.js 作为我的后端。但是，是的，你是对的，这正是我设置它的方式，但我最终放弃了所有 Laravel 视图并迁移到 100% Vue.js SPA，并安装了自托管的 prerender.io 以确保安全我 100% 知道它会被正常抓取

【参考方案2】：

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

所以我决定将我所有的代码库重新编写成一个 SPA。现在是时候了，没有真正的理由不这样做。我正在使用 Prerender.io 的自托管服务为 SEO 等进行预渲染。