php - Vue route to details component on click

Question

I'm working on a project where the back-end is built in PHP and the front-end is built in VUE. In my project i'm currently displaying a list of orders (received as JSON through a get request to an API) and whenever i click an order in the list, i want to open a details page of that order. So i need to push the current order through. In angular i used something like " this.router.navigate(['/orders', order.id]); " but i can't seem to get it working now.

My 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>

I tested this method which does give me the correct order:

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

How can i pass this order to a new component and display the order fields in it? I can't seem to access this.$router. (my project uses Inertia aswell). Help is much appreciated!

question from:https://stackoverflow.com/questions/65916919/vue-route-to-details-component-on-click

Answer 1

I'm kinda confused how to go about this since the project is built in php partly. In my app.js i just created a new vue route:

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);

My method to push to the router:

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

Currently whenever i click an order only the url changes to the following:

How can i now render the component with the order as a prop. Do i need to define the route in the php routes/web.php aswell to render it?