Использование маршрутизатора Symfony с vue. js - PullRequest
Новая
       16

Использование маршрутизатора Symfony с vue. js

1 голос
/ 18 февраля 2020

Я довольно новичок в symfony и немного опыт в vue. js. После небольшого исследования я не смог найти решение своей проблемы.

У меня следующая проблема:

Я создаю многостраничное приложение с Symfony и vue. js для внешнего интерфейса. Я использую форму поиска в своем шаблоне index.html.twig, чтобы получить информацию о данном поисковом запросе из API.

Поэтому я использую маршрутизацию с Symfony. При нажатии на кнопку поиска вызывается URL xxx/search?query=test. Этот URL обрабатывается моим symfony контроллером, который получает данные от API и отображает страницу search-result.html.twig. Я использую Vue. js в index.html.twig и хочу также использовать Vue в search-result.html.twig (и других маршрутах и ​​страницах), но я не совсем уверен, как использовать разные vue экземпляры на разных страницах.

Я надеюсь, что смог правильно описать проблему! Ждем ваших предложений.

ОБНОВЛЕНИЕ:

Это моя текущая инфраструктура:

base. html .twig (все другие страницы наследуются из этого шаблона): 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
    </head>
    <body>
        <div id="app">
            {% block body %}{% endblock %}
        </div>
   </body>
   {% block javascripts %}
     {{ encore_entry_script_tags('app') }}
   {% endblock %}
</html>

Вот как я инициализирую свой vue экземпляр: 

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App)
}).$mount('#app');

Из приложения. vue Затем я отправляю свои различные компоненты.

Проблема в том, что при открытии другого файла ветки я не могу использовать другой макет страницы.

1 Ответ

1 голос
/ 18 февраля 2020

Возможно, вы хотите иметь несколько Vue -Apps с разными точками входа, которые можно использовать в вашем приложении Symfony. Из того, что выглядит, у вас есть 3 места, где вы должны внести изменения. В зависимости от деталей вам, возможно, придется внести дополнительные изменения.

Конфигурация веб-пакета

Для этого необходимо добавить эти точки входа в webpack.config.js, например, путем добавления точки входа для поискаApp.

Ваш файл vue "bootstrap"

Затем необходимо скопировать app.js (или куда-либо Vue -сниппет из Ваш вопрос сохраняется) для нового приложения и внесите коррективы, например, вместо import App from './App.vue' вы можете получить import SearchApp from './SearchApp.vue' (а затем обновить вызов приложения далее).

Ваши шаблоны

Теперь у вас должно быть 2 vue приложений в вашем проекте с 2 точками входа веб-пакетов для загрузки их данных (CSS / JS). Ваш base.html.twig загрузит javascript для исходного приложения с точкой входа app. Теперь вы должны указать search-result.html.twig перезаписать эти файлы файлами для новой точки входа (при условии: searchApp): 

{% extends "base.html.twig" %}

{% block stylesheets %}{{ encore_entry_link_tags('searchApp') }}{% endblock %}
{% block javascripts %}{{ encore_entry_script_tags('searchApp') }}{% endblock %}

В случае, если один из этих блоков содержит некоторые общие ресурсы, вы также можете добавить {{ parent() }} вызов, чтобы загрузить их с базы. html .twig, но будьте осторожны, чтобы не получить конфликты в ваших JS вызовах. Теперь search-result.html.twig должен загрузить новый Vue -app. Теперь вы можете изменить макет этого приложения по своему усмотрению, и это не должно мешать вашему другому приложению.

...