带有查询的 Vue JS 嵌套路由答案

【问题标题】：Vue JS Nested Routes with Queries带有查询的 Vue JS 嵌套路由
【发布时间】：2018-08-23 15:25:09
【问题描述】：

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

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

我正在尝试将其作为 BookAppointment 组件的 URL：/physicians/?appt_id=12345&npi=123456789。如果有更好的方法可以做到这一点，我愿意接受建议。提前致谢。

路由器/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
      }
    ]
   }
 ]
})

【问题讨论】：

标签： javascript vue.js vue-component vue-router

【解决方案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-template 中创建一个按钮/链接：

<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 组件。

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

【讨论】：