Question

我是Vue的新手，正在从事演示项目，但似乎无法理解带有查询参数的路由的工作方式。我在文档中注意到他们建议使用router.push({ path: 'register', query: { plan: 'private' }})，它会产生/register?plan=private。

有没有办法使用嵌套路由？

我正在尝试通过BookAppointment组件的网址/physicians/?appt_id=12345&npi=123456789实现这一目标。如果有更好的方法可以这样做，我欢迎您提出建议。预先感谢。

router / index.js

const router = new VueRouter({
  routes: [
   { path: '/physicians/', component: PhysicianLanding,
     children: [
      {
        // PhysicianProfile
        path: 'profile/:url',
        component: PhysicianProfile
      },
      {
        // BookAppointment has 3 different progress steps to get to
        // the confirm page
        path: '',
        query: { appt_id: '12345', npi: '123456789'},
        component: BookAppointment
      }
    ]
   }
 ]
})

Answer 1

const router = new VueRouter({
  routes: [
   { path: '/physicians/', component: PhysicianLanding,
     children: [
      {
        // PhysicianProfile
        path: 'profile/:url',
        component: PhysicianProfile
      },
      {
        // BookAppointment has 3 different progress steps to get to
        // the confirm page
        path: '',
        //query: { appt_id: '12345', npi: '123456789'}, // not required here.
        component: BookAppointment
      }
    ]
   }
 ]
})

要转到URL为-> /physicians/?appt_id=12345&npi=123456789的BookAppointment组件，您可能需要使用以下@click事件在vue模板中创建按钮/链接：

<button 
  @click="$router.push({ path: '/physicians/', query: { 
   appt_id: 12345, 
   npi: 123456789
  }})"
>
 GO TO: Book Appointment
</button>

OR

<button 
 @click="$router.push({ path: '/physicians/?appt_id: 12345&npi: 123456789})"
>
 GO TO: Book Appointment
</button>

您可以更改查询值，仍然会显示 BookAppointment 组件。

例如。 /physicians/?appt_id: 123456&npi: 1234567890还将呈现 BookAppointment 组件。

您可以使用不同的查询值从数据库中获取不同的数据，并将其呈现在同一基础模板上。

Vue JS带有查询的嵌套路由

1 个答案: