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

时间:2017-01-09 18:17:24

标签: javascript laravel vue.js single-page-application vue-router

所以我正在开发Laravel 5.3和Vue 2中的网站/ webapp。搜索引擎优化非常重要,所以我想保留Laravel + Blade中网站的前端/可抓取部分,并且只需要很小的非必要部分在Vue 2.0中,所以我没有使用Ajax来加载页面内容,并允许像Google这样的抓取工具抓取并索引网站。 (AFAIK,Google确实加载了JS,但是不等待Ajax加载,所以它被击中/错过了。)

然而,在后端,我想与Vue和VueRouter完全一致。

如何最好地将两者分开?

我希望我的后端可以通过 / 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后端分开?

2 个答案:

答案 0 :(得分:0)

对于遇到这种情况的人来说,我无法找到关于禁用VueRouter特定链接的任何内容。我不认为这是可能的,也可能不值得麻烦。

所以我决定重新编写我的所有代码库作为SPA。这是关于时间的,并没有真正的理由不这样做。我使用Prerender.io的自托管服务进行SEO预渲染等。

答案 1 :(得分:0)

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

Google 可以抓取基于JS的前端网站,而无需预渲染或服务器端渲染。有一点需要注意,谷歌使用Chrome 41来抓取并渲染网站,因此您的javascript必须至少填充得足以支持Chrome 41功能(或者至少您的基于​​Vue的数据需要填充以支持Chrome 41)。到目前为止,我还没有遇到任何麻烦。

  

使用我的Vue SPA后端的Laravel前端

这是倒退的。如果你这样做,不要。 Laravel应该是你的后端&前端(通过刀片+ bootstrap + Vue / react),或仅限你的后端。 Vue.js是一个前端框架,不应该用作"后端。"所有数据库查询,身份验证,计算,电子邮件等都应由Laravel处理。 Laravel非常适合后端工作,使用laravel编写整个API并将Vue专门用于前端是完全合理的。当然你可能能够一起破解它并使它以某种方式工作,但你不应该,并且你只是为自己创造了额外的头痛。

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

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

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

但是如果你的应用程序要求Vue Router在根域访问,那么只需将它放在你的路由文件的最后,因为当路由匹配完成后,它会在第一次匹配后退出。因此,通过将它放在路径文件的末尾,您实际上将它用作"捕获所有"对于上面未指明的任何路线。想想它就像早点回来一样。