Symfony 4,Twig和VueJS - 重定向到Vue组件中的Symfony路由

Question

我正在使用Twig模板和用于UI组件的VueJS开始使用Symfony 4.

我在.vue列出任务的文件中有一个非常基本的组件,它目前呈现基本表.

// task-list.vue

<template>
    <div>
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>
                    Task
                </th>
                <th>
                    Description
                </th>
                <th>
                    Completed?
                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="task in parsedTasks">
                <td>
                    {{ task.title }}
                </td>
                <td>
                    {{ task.description }}
                </td>
                <td>
                    {{ task.completed ? 'Yes' : 'No' }}
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
      name: 'task-list',
      props: {
        tasks: {required: true}
      },
      computed: {
        parsedTasks() {
          return JSON.parse(this.tasks);
        }
      },
    };
</script>

该组件在根JS文件中注册;

// assets/js/app.js

Vue.component('task-list', TaskList);

new Vue({
  el: '#app-root'
});

然后将其用于Twig模板;

// tasks/list.html.twig

...
<task-list tasks="{{ tasks | json_encode }}"></task-list>
...

我希望能够使用path()Twig函数,以便在单击任务列表中的行时,将用户重定向到生成的路径/路径.鉴于Vue组件不在Twig文件中,这可能吗？

作为一个附带问题,是否有更好的方法将Twig变量传递给Vue组件而不是json编码然后解析上面的数据？

Answer 1

主要有两种方法： 在后端生成 URL 并在 javascript 中使用它：

var route = "{{ path('blog_show', {'slug': 'my-blog-post'})|escape('js') }}";

https://symfony.com/doc/current/routing/generate_url_javascript.html

或者使用与 FOSJsRouting 等 symfony 路由集成的 javascript 路由库：

var url = Routing.generate('blog_show', {
    'slug': 'my-blog-post'
});

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle