Exploring Nested Routes and Queries in Vue JS

Question

Exploring Nested Routes and Queries in Vue JS

As a beginner in Vue, I have been exploring a demo project and struggling with understanding how routes with query parameters function. The documentation suggests using

router.push({ path: 'register', query: { plan: 'private' }})

to generate the URL /register?plan=private.

I'm curious if it's possible to achieve similar functionality with nested routes.

My goal is to set the URL for the BookAppointment component as:

/physicians/?appt_id=12345&npi=123456789

. Any suggestions on a better approach would be greatly appreciated. Thank you!

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

javascript vue.js vue-component vue-router

Answer 1

Answer №1

const router = new VueRouter({
  routes: [
   { path: '/doctors/', component: DoctorLanding,
     children: [
      {
        // DoctorProfile
        path: 'profile/:url',
        component: DoctorProfile
      },
      {
        // ScheduleAppointment has multiple progress steps to reach
        // the confirmation page
        path: '',
        //query: { appt_id: 'ABCDE', license: '123456'}, // not needed here.
        component: ScheduleAppointment
      }
    ]
   }
 ]
})

To access the ScheduleAppointment Component with the URL as ->
/doctors/?appt_id=ABCDE&license=123456
, you can create a button/link in the Vue template with the following @click event:

<button 
  @click="$router.push({ path: '/doctors/', query: { 
   appt_id: ABCDE, 
   license: 123456
  }})"
>
 GO TO: Schedule Appointment
</button>

OR

<button 
 @click="$router.push({ path: '/doctors/?appt_id: ABCDE&license: 123456})"
>
 GO TO: Schedule Appointment
</button>

You have the flexibility to change the query values, while the ScheduleAppointment component will still be displayed.

For instance,

/doctors/?appt_id: FGHIJ&license: 0987654321

will also show the ScheduleAppointment Component.

You can utilize different query values to retrieve diverse data from the database and exhibit it on the same fundamental template.

Answer 2

const router = new VueRouter({
  routes: [
   { path: '/doctors/', component: DoctorLanding,
     children: [
      {
        // DoctorProfile
        path: 'profile/:url',
        component: DoctorProfile
      },
      {
        // ScheduleAppointment has multiple progress steps to reach
        // the confirmation page
        path: '',
        //query: { appt_id: 'ABCDE', license: '123456'}, // not needed here.
        component: ScheduleAppointment
      }
    ]
   }
 ]
})

To access the ScheduleAppointment Component with the URL as ->
/doctors/?appt_id=ABCDE&license=123456
, you can create a button/link in the Vue template with the following @click event:

<button 
  @click="$router.push({ path: '/doctors/', query: { 
   appt_id: ABCDE, 
   license: 123456
  }})"
>
 GO TO: Schedule Appointment
</button>

OR

<button 
 @click="$router.push({ path: '/doctors/?appt_id: ABCDE&license: 123456})"
>
 GO TO: Schedule Appointment
</button>

You have the flexibility to change the query values, while the ScheduleAppointment component will still be displayed.

For instance,

/doctors/?appt_id: FGHIJ&license: 0987654321

will also show the ScheduleAppointment Component.

You can utilize different query values to retrieve diverse data from the database and exhibit it on the same fundamental template.

Exploring Nested Routes and Queries in Vue JS

Answer №1

Similar questions

Are there any solutions to refresh a page by clicking a button in next.js?

Tips for using an array as a jQuery selector in JavaScript

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

How can I save or export an image file containing HTML content?

I created a Vue object, but I seem to have misplaced it

eliminate currency match regular expression

Using v-model within a nested v-for loop of a multi-level array

Move tables by dragging and dropping them into place

Transmitting document through HTML form using Laravel integration with Mailgun API

The chosen state does not save the newly selected option

Using JS and d3.js to eliminate or combine duplicate connections in a d3.js node diagram

In a production environment, an ENOENT error in Next.js was triggered by fs.readdirSync

Require assistance in getting a slider operational

Modify the `div` content based on the selected items from the bootstrap dropdown menu

deleting the current product information during an ajax request

Modify the CSS class by adding attributes dynamically instead of directly to the element

Attempting to update the state by utilizing the values provided by useContext

Trouble Arising from the Lack of Coordination Between CSS Transition and JavaScript Update Triggered by Element

Automating testing with JavaScript and Selenium WebDriver

I need to update my database by sending requests to my API, as the changes are not being reflected in the current database state. I am eager to see the