How to open a page with a router link with vue 3 and Quasar?

85 Views Asked by At

I'm trying to open a propriete page with a specific id by clicking on a button and displaying the new component's folder, but the contntent is empty and I'm receiving a warning which says " No match found for location with path "/aircraftsForm/1""

//routes

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { 
        path: '', 
        component: () => import('pages/IndexPage.vue'), 
        children: [
          {
            path: 'detailsForm',
            component: () => import('../views/DetailsFormView.vue')
          },
          {
            path: 'aircraftsForm',
            component: () => import('../views/AircraftsFormView.vue'),
            children: [
              {
                path: 'aircraftsForm/:id',
                component: () => import('../components/AircraftComponent.vue'),
                props: true
              },
            ]
          },
        ]
      }
    ]   
  }
]

//Parent view component 
const details = ref([
    {
      id: 1,
      tail: '501'
    },
    {
      id: 2,
      tail: '501'
    }
])
<template>
  <form>
    <AircraftsFormComponent :details="details"/>
  </form>
</template>

// Child component
<router-link 
    :to="{ 
    path: `aircraftsForm/${props.row.id}`,
    params: test
   }" >
 <q-btn color="primary" label="Edit" />
</router-link>

// child component to render on router link
<template>
  <div>
    <p>{{id}}</p>
    <p>tail</p>
  </div>
</template>

I'm expecting to see the content of the child component to be rendered after linking to the router link tag

0

There are 0 best solutions below