如何在 vuejs 中使用 symfony 路由？答案

【问题标题】：How to use symfony routing with vuejs?如何在 vuejs 中使用 symfony 路由？
【发布时间】：2017-07-20 09:44:26
【问题描述】：

我是 VueJS 的新手，我想将它与我的 Symfony 平台一起使用。我想知道如何在 twig 变量中添加 VueJs 变量。

这是我的例子：

<div v-for="competition in Vcompetitions">
     <div class="thumbnail">
       <a v-bind:href="XXX">
         <img v-bind:src="competition.src">
       </a>
     </div>
</div>

考虑所需的树枝路径是：{{ path('name', {'id' : THEID })}}，而 VueJs 变量是 competition.id 我不知道在 XXX 上做什么。

感谢您的帮助

【问题讨论】：

标签： javascript symfony vuejs2

【解决方案1】：

您可以使用 FOSJsRoutingBundle，查看文档：

https://symfony.com/doc/current/bundles/FOSJsRoutingBundle/installation.html https://symfony.com/doc/current/bundles/FOSJsRoutingBundle/usage.html

【讨论】：

【解决方案2】：

你可以试试这样的

第1步：可以将vuejs分隔符{{ }}改为${ }

           $(document).ready(function () {
                var app = new Vue({
                    delimiters: ['${', '}'],
                    el: '#app',
                    data: {
                        competition: {"id":1},
                    },
                });
            });

第 2 步：现在您可以在 twig 文件中使用类似下面的内容
对于 vuejs 变量 ${competition.id} 和 twig 变量 {{competition.id}}。在你的情况下{{ path('name', {'id' : ${competition.id} })}}

【讨论】：

这不起作用，我收到意外字符“$”错误。我这样做了
你能改变分隔符delimiters: ['${', '}'], 吗？
能否请您出示您的app.js 或主应用js 文件
对不起，我没有主应用 js 文件，我只有上面的 JS 代码。
我说的是那些你初始化 vuejs 代码的文件！