javascript - 带有查询的 Vue JS 嵌套路由

Question

我是 Vue 的新手，一直在做一个演示项目，但我似乎无法理解带有查询参数的路由是如何工作的。我在文档中注意到他们推荐 router.push({ path: 'register', query: { plan: 'private' }}) 这会产生 /register?plan=private.

有没有办法用嵌套路由做到这一点？

我正在尝试将其作为 BookAppointment 组件的 URL:/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
      }
    ]
   }
 ]
})

To go to BookAppointment Component with URL as -> /physicians/?appt_id=12345&npi=123456789, you may need to make a button/link in the vue-template with following @click event:

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

或

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

您可以更改查询值，BookAppointment 组件仍然会被渲染。

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

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