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

Posted 2023-03-14

【中文标题】访问 Vue 模板中的所有 Laravel 路由

【英文标题】：Access all Laravel routes in Vue template

【发布时间】：2021-02-08 02:35:41

【问题描述】：

我基本上是在尝试使用 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>

【参考方案1】：

使用这个

https://github.com/tighten/ziggy

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

【讨论】：

谢谢！不知道为什么我一开始就找不到。再次感谢！