访问 Vue 模板中的所有 Laravel 路由

Question

我基本上是在尝试使用 Laravel 中的 Vue 创建某种动态表。 我已成功创建表并通过 jquery 的 $.getJSON 方法获取数据。我真的很想在表格中有一个链接，它可以使用 Laravel 的 route() 方法指向一个 URL，因为我有许多不同的路由我想使用。

本例中的示例是该表包含所有用户的列表，我希望每个用户都有一个查看用户链接。但我无法在 Vue 组件中访问 Laravel 的 route()。

这是一个非常简短的问题：除了像这样向模板上的属性字段添加单个路由之外，还有什么方法可以访问 Laravel 拥有的所有路由：

<user-table-component dataRoute="{{ route('datatable.users') }}">
</user-table-component>

我愿意就如何以另一种方式解决此问题提出建议。 另外，这里是模板：

<template>

    <table>
        <thead>
            <tr>
                <td v-for="header in json.headers" :key="header">{{ header }}</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="user in json.rows.data" :key="user">
                <td><a href="THIS WOULD BE AN VIEW USER LINK">{{ user.name }}</a></td>
                <td>{{ user.email }}</td>
                <td>{{ user.created_at }}</td>
            </tr>
        </tbody>
    </table>

</template>



<script>
    module.exports = {
        name: 'user-table-component',
        props: ['dataroute'],

        data: function(){
            return {
                json: []
            }
        },

        // This is auto-run when the Vue app is booted up
        mounted() {

            // Closure to accept component in the callback below
            var self = this;
            $.getJSON(this.dataroute, function(json) {
                self.json = json;
            });
        }
    }
</script>

Answer 1

使用这个

https://github.com/tighten/ziggy

然后在Javascript中你可以使用route('route.name')