Fatal编程技术网
  • symfony/
  • 将Symfony路由器与vue.js一起使用

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

symfony vue.js routing

将Symfony路由器与vue.js一起使用,symfony,vue.js,routing,Symfony,Vue.js,Routing,我对symfony很陌生，对vue.js有点经验。经过一番研究，我没能找到解决问题的办法 我有以下问题： 我正在使用Symfony和vue.js为前端构建一个多页应用程序。我使用模板index.html.twig中的搜索表单从API中获取有关给定搜索查询的信息 因此，我使用Symfony的路由。点击搜索按钮时，会调用URLxxx/search？query=test。这个URL由我的symfony控制器处理，它从API获取数据，并呈现页面search result.html.twig。我在inde

我对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（所有其他页面都继承自此模板）：

然后，我从App.vue分派不同的组件

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

您可能希望有多个具有不同入口点的Vue应用程序可以在您的Symfony应用程序中使用。从表面上看，你有三个地方需要改变。根据具体情况，您可能还需要进行其他更改

网页包配置

这要求您将这些入口点添加到
webpack.config.js
中，例如为searchApp添加入口点

您的vue“引导”文件

然后，您必须复制新应用程序的
app.js
（或者问题中的Vue片段存储在哪里）并进行调整，例如，您可以使用
从“/app.Vue”导入SearchApp
（然后进一步向下更新应用程序调用），而不是
从“/SearchApp.Vue”导入SearchApp

您的模板

现在，您的项目中应该有2个vue应用程序，其中包含2个用于加载其数据的网页入口点（CSS/JS）。你的
base.html.twig
将使用entrypoint
app
加载原始应用程序的javascript。现在，您必须告诉
search result.html.twig
用新入口点的文件覆盖这些文件（假设：
searchApp
）：


如果这些块中有一个包含一些共享资源，您也可以添加一个
{{parent（）}
调用，从base.html.twig加载它们，但请注意不要在JS调用中产生冲突。现在，
search result.html.twig
应该加载新的Vue应用程序。现在，您可以根据自己的需要更改该应用程序的布局，而这不会影响到其他应用程序。
我还不完全清楚到底是什么问题。你能告诉我为什么vue.js不能处理
搜索结果.html.twig
？查看vue.js在您的
index.html.twig
中的使用情况也会有所帮助，作为参考。也许比较两个模板文件的内容也会有所帮助。相关的部分是他们是否扩展了模板，模板是否不同，是否有包含javascript的块。我刚刚编辑了最初的帖子。谢谢

<!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>



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

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



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

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