Отключить vue-router для определенных маршрутов? Или как запустить бэкэнд SPA, а не интерфейс SPA?

поэтому я разрабатываю веб-сайт / веб-приложение в Laravel 5.3 и Vue 2. SEO важно, поэтому я хочу сохранить раздел веб-интерфейса / сканирования сайта в Laravel + Blade и только небольшие ненужные разделы в Vue 2.0. , поэтому мне не нужно использовать Ajax для загрузки содержимого страницы и разрешить поисковым роботам, таким как Google, сканировать и индексировать сайт. (AFAIK, Google загружает JS, но не ждет загрузки Ajax, поэтому он попадает / промахивается).

Однако, что касается бэкэнда, я хочу полностью использовать SPA с 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
    ...

Что действительно работает. Однако это кажется неправильным. Поскольку маршрутизатор представления все еще загружается в моем интерфейсе (добавляет хэш / хэш-банг).

Итак, есть ли лучший способ отделить мой интерфейс Laravel от моего бэкенда Vue SPA?


javascript vue.js laravel vue-router single-page-application
person Kingsley    schedule 09.01.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Для тех, кто сталкивался с этим, я не смог найти ничего об отключении VueRouter для определенных ссылок. Я не думаю, что это возможно, также, наверное, не стоит беспокоиться.

Поэтому я решил переписать всю свою кодовую базу, чтобы она стала SPA. Пришло время, и нет причин не делать этого. Я использую собственный сервис Prerender.io для предварительного рендеринга для SEO и т. Д.

person Kingsley    schedule 19.01.2017

arrow_upward
0
arrow_downward

Просто чтобы прояснить некоторые заблуждения для кого-либо в будущем.

Google может сканировать веб-сайты на основе JS без предварительной или серверной обработки. С одной оговоркой, Google использует Chrome 41 для сканирования и рендеринга сайта, поэтому ваш javascript должен быть полифиллирован, по крайней мере, достаточно хорошо, чтобы поддерживать функции Chrome 41 (или, по крайней мере, ваши данные на основе Vue должны быть полифильными для поддержки Chrome 41). До сих пор у меня не было проблем с использованием babel.

Интерфейс Laravel с моим сервером Vue SPA

Это наоборот. Если вы это делаете, не делайте этого. Laravel должен быть вашим сервером и интерфейсом (через blade + bootstrap + Vue / react) или только вашим сервером. Vue.js - это интерфейсный фреймворк, и его не следует использовать как «бэкэнд». Все ваши запросы к базе данных, аутентификация, расчеты, электронная почта и т. Д. Должны обрабатываться Laravel. Laravel отлично подходит для работы с сервером, и вполне разумно закодировать весь API с помощью laravel и использовать Vue исключительно для интерфейса. Конечно, вы могли бы взломать его вместе и заставить его каким-то образом работать, но вам не следует этого делать, и вы просто создадите себе дополнительную головную боль без причины.

Но чтобы также ответить на этот вопрос, потому что есть случай, когда веб-сайт имеет только часть своего сайта в качестве SPA (возможно, блог является сайтом SPA, но полностью отделен от "о нас", "контакт us "и т. д., например, страницы (например, вы можете обновлять веб-сайт по частям и хотели бы развертывать обновленные страницы с течением времени, а не решать все сразу). В этом случае вы можете указать конкретные маршруты для запуска Vue Router on, а все остальные будут обрабатываться laravel.

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

Это позволит Vue Router обрабатывать все, что находится в подкаталоге DIR, но позволит другим маршрутам сосуществовать рядом с ним.

Но если вашему приложению требуется, чтобы Vue Router имел доступ к корневому домену, просто поместите его в самый конец файла маршрутов, потому что, когда выполняется сопоставление маршрутов, он завершает работу после первого совпадения. Таким образом, помещая его в конец файла маршрутов, вы, по сути, используете его как «ловушку для всех» для любых маршрутов, не указанных выше. Думайте об этом как о раннем возвращении.

person Xander Luciano    schedule 15.03.2018
comment
Чтобы уточнить, я имел в виду использование того же приложения Laravel для моего backend API и просто доступ к нему с помощью Vue.js, а не использование Vue.js исключительно в качестве моего backend. Но да, вы правы, это именно то, как я его настроил, но в итоге я отказался от всех представлений Laravel и перешел на 100% Vue.js SPA с собственной установкой prerender.io, чтобы не рисковать, поэтому Я на 100% знаю, что сканирование будет выполняться как обычно - person Kingsley; 15.03.2018