Vue JS Nested Routes with Queries

Question

I'm new to Vue and have been working on a demo project and I can't seem to understand how routes with query parameters work. I noticed in the documentation that they recommend router.push({ path: 'register', query: { plan: 'private' }}) which would produce /register?plan=private.

Is there a way to do this with nested routes?

I'm trying to achieve this as the URL for the BookAppointment component: /physicians/?appt_id=12345&npi=123456789. If there is a better way to do this I'm open to suggestions. Thanks in advance.

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
      }
    ]
   }
 ]
})

Shivam Singh · Accepted Answer · 2018-08-23 16:20:51Z

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>

OR

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

You can change the query values, still, BookAppointment component will be rendered.

Eg. /physicians/?appt_id: 123456&npi: 1234567890 Will also render the BookAppointment Component.

You can use the different query value to fetch different data from the database & render it on the same base template.

Collectives™ on Stack Overflow

Vue JS Nested Routes with Queries

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related