将 Symfony 路由器与 vue.js 一起使用

Question

我对 symfony 很陌生，对 vue.js 有一点经验。经过一些研究后，我无法找到解决问题的方法。

我有以下问题：

我正在使用 Symfony 和 vue.js 为前端构建一个多页应用程序。我在模板 index.html.twig 中使用搜索表单从 API 中获取有关给定搜索查询的信息。

因此我在 Symfony 中使用路由。当点击搜索按钮时， URL xxx/search?query=test 被调用。这个 URL 由我的 symfony 控制器处理，它从 API 获取数据并呈现页面 search-result.html.twig。我在 index.html.twig 中使用 Vue.js，我也想在 search-result.html.twig（以及其他路由和页面）中使用 Vue，但我不太确定如何在不同的平台上使用不同的 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');

从 App.vue 然后我发送我的不同组件。

问题是：当我现在打开不同的 twig 文件时，我无法使用不同的页面布局。

Answer 1

您可能希望有多个具有不同入口点的 Vue-Apps 可以在您的 Symfony 应用程序中使用。从看起来您有 3 个地方必须进行更改。根据详细信息，您可能还需要进行其他更改。

Webpack 配置

这需要您将这些入口点添加到您的 webpack.config.js 例如通过为 searchApp 添加入口点。

你的vue"bootstrap"文件

然后您必须为新应用复制 app.js（或存储您问题中的 Vue 代码段的任何位置）并进行调整，例如您可以使用 import SearchApp from './SearchApp.vue' 而不是 import App from './App.vue'（然后进一步更新 App 调用）。

您的模板

现在你的项目中应该有 2 个 vue 应用程序和 2 个 webpack 入口点来加载它们的数据 (CSS/JS)。您的 base.html.twig 将为具有入口点 app 的原始应用程序加载 javascript。您现在必须告诉 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() }} 调用以从 base.html.twig 加载它们，但要注意不要在您的 JS 调用中发生冲突。现在 search-result.html.twig 应该加载新的 Vue-app。您现在可以根据需要更改该应用的布局，它不会影响您的其他应用。

将 Symfony 路由器与 vue.js 一起使用

Using the Symfony Router with vue.js

symfony

vue.js

routing