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

Posted 2023-02-22

【中文标题】单击时Vue路由到详细信息组件

【英文标题】：Vue route to details component on click

【发布时间】：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。 （我的项目也使用惯性）。非常感谢您的帮助！

【参考方案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 中定义路由来渲染它吗？