如何使用 vue 3 和 Quasar 打开带有路由器链接的页面?

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

提问人:Ron 提问时间:11/9/2023 更新时间:11/9/2023 访问量:16

问:

我正在尝试通过单击按钮并显示新组件的文件夹来打开具有特定 ID 的专有页面,但该文件夹为空,并且我收到一条警告,上面写着“找不到路径为”/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>

我希望看到链接到路由器链接标记后要呈现的子组件的内容

javascript vue.js vuejs3 路由器 vue-props

评论

0赞 Estus Flask 11/9/2023
我想aircraftsForm/:id不应该是aircraftsForm的子级,这需要匹配/aircraftsForm/aircraftsForm/1
0赞 Ron 11/9/2023
是的,这确实奏效了!

答: 暂无答案