Как настроить Symfony для работы с Vue.js в режиме истории HTML5
Я следовал за руководство о том, как интегрировать Vue в Symfony (3.3), и он работает просто отлично.
Однако я хотел бы использовать vue-router в режиме истории HTML5, поэтому с «реальными» URL вместо хешей. Проблема заключается в том, что при первоначальной загрузке страницы индекса это работает хорошо, так как не удается открыть страницу с URL-адресом Vue, которого symfony не знает, потому что symfony выдаст ошибку 404 и не загрузит представление индекса с помощью Vue приложение.
Я хотел бы использовать symfony только для определенных префиксов маршрутов, таких как / blog, / api, и для всех других маршрутов загружать индексный маршрут, который ничего не делает, кроме загрузки приложения vue, но я не знаю, с чего начать.
Я предполагаю, что я должен либо изменить .htaccess (в настоящее время используется точный тот, который пришел с установкой Symfony) или каким-то образом «поймать» маршруты, которые Symfony не знает и перенаправить на страницу индекса — однако я застрял здесь, так как я хотел бы, чтобы маршруты, которые не были найдены в пределах диапазона нескольких префиксов маршрутов, которые я хочу, чтобы Symfony использовал для скинуть ошибку 404.
Решение
Была такая же проблема. Symfony одновременно предоставляет управляемый интерфейс Vue и реализует Rest-API. Я решил это, используя какой-то PageNotFound-Fallback, поэтому практически каждый маршрут, который не был найден Symfony Router, будет перенаправлен / перенаправлен во внешний интерфейс. Итак, FrontendController выглядит так:
class FrontendController extends Controller{
public function indexAction(Request $request)
{
$base=$request->getBaseUrl();
return $this->render('default/index.html.twig',['basePath'=>$base]);
}public function pageNotFoundAction()
{
return $this->forward('AppBundle:Frontend:index');
}
}
С дополнительной конфигурацией в routing.yml (см .: Перенаправление с прослушивателем событий для всех "Не найдено ни одного маршрута 404 Не найдено — NotFoundHttpException")
pageNotFound:
path: /{path}
defaults: { _controller: AppBundle:Frontend:pageNotFound, path: '' }
requirements:
path: .*
Наконец, необходимо настроить VueRouter, чтобы он поддерживал правильную среду, просто добавляя base Свойство в конструкторе Router. Если компонент внешнего интерфейса отображается неправильно, вы можете использовать router.push('some-route') вручную настроить его.
Имейте в виду, что ошибок 404 больше не будет, поскольку все они перенаправляются на веб-интерфейс, что может привести к плохим сценариям с использованием ajax при загрузке страницы …
Хотя это похоже на взлом, я надеюсь, что это поможет. Открыт для лучших решений.
РЕДАКТИРОВАТЬ Symfony версия 3.4.3, Vue версия 2.5.1
Другие решения
Для тех, кто предпочитает использовать аннотации [Symfony 3.x, 4.x]
Вы можете использовать следующую маршрутизацию в Symfony.
class DefaultController extends Controller
{
/**
* @Route("/", name="homepage")
* @Route("/{route}", name="vue_pages", requirements={"route"=".+"})
*/
public function indexAction(Request $request)
{
return $this->render('default/index.html.twig', []);
}
}
И в VueJS, вы можете Вью-маршрутизатор отображать 404 страница для маршрутов не найдена через подстановочные как показано ниже,
import '...'; // import required components
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'homepage',
component: home
},
{
path: '/hello',
name: 'hello',
component: hello
},
{
path: '*', // wildcard
name: 'notfound',
component: notfound
}
]
});
Вы можете проверить это Справочное руководство и исходный код для пошагового настроить.
Протестировано с Symfony 3.x, 4.x, VueJS 2.5.x, VueRouter 3.x