Question

我正在开发一个项目，其中后端是用 PHP 构建的，而前端是用 VUE 构建的。在我的项目中，我目前正在显示订单列表（通过 API 的 get 请求接收为 JSON），每当我单击列表中的订单时，我都想打开该订单的详细信息页面。所以我需要推动当前的订单。在 angular 中，我使用了类似“this.router.navigate(['/orders', order.id]);”之类的东西，但我现在似乎无法让它工作。

我的 HTML

<tr v-for="(order, index) in orders" @click="onOrderClick(order)"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.id }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ order.deliveryName }}
                            </td>

我测试了这个方法，它确实给了我正确的顺序：

onOrderClick: function (order) {
        //TODO::navigate to order/$id
        console.log('clicked', order.id)
    },

如何将此订单传递给新组件并在其中显示订单字段？我似乎无法访问 this.$router。（我的项目也使用惯性）。非常感谢帮助！

Answer 1

我有点困惑如何解决这个问题，因为该项目部分是用 php 构建的。在我的 app.js 中，我刚刚创建了一个新的 vue 路由：

const router = new VueRouter({
mode: 'history',
routes: [
    {
        path: '/order/${order.id}',
        name: 'order',
        component: OrderDetails,
        props: true,
    },
],
});

new Vue({
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                resolveComponent: (name) => require(`./Pages/${name}`).default,
            },
        }),
    router,
}).$mount(app);

我推送到路由器的方法：

onOrderClick: function (order) {
        console.log('clicked', order.id)
        this.$router.push(`/order/${order.id}`);
    },

目前，每当我点击订单时，只有 url 会更改为以下内容：

我现在如何以订单作为道具渲染组件。我需要在 php routes/web.php 中定义路由来渲染它吗？

Answer 2

您可以使用推送方法将该 id 作为参数传递给您的路线：

ValidateAudience = false

单击时Vue路由到详细信息组件

2 个答案: