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

【问题标题】：Vue route to details component on click单击时Vue路由到详细信息组件
【发布时间】：2021-05-01 03:44:55
【问题描述】：

我正在做一个后端用 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。（我的项目也使用惯性）。非常感谢您的帮助！

【问题讨论】：

标签： php vue.js navigation inertiajs

【解决方案1】：

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

this.$router.push(`/orders/${order.id}`)

【讨论】：

【解决方案2】：

由于该项目部分是在 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 中定义路由来渲染它吗？

【讨论】：