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
      }
    ]
   }
 ]
})
javascriptvue.jsvue-componentvue-router

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When certain triggers are activated, a hidden textbox revealed through javascript is made visible

After changing a dropdown value (from ddlSource) and hiding some text boxes using JavaScript, everything works fine. However, when the user enters a certain value in another textbox triggering an AJAX call to populate some labels, upon form reload, the hid ...

javascriptasp.netajax

Tips for including a JWT token as a query parameter in NEXT js?

const UserJwt = (props) => { const { jwt } = props; const [jwtToken, setJwtToken] = useState(null); useEffect(() => { if (jwt) { setAuthToken(jwt); setJwtToken(jwt); } }, [jwt]); return <MobilePurchaseScreen {...pro ...

javascriptreactjsnext.js

Create a function that triggers a fade-out effect on one button when another button is clicked

Hello everyone! I'm still getting the hang of things around here so please be kind. I need some assistance with my weather app project. Specifically, I've created two buttons and I want to make it so that when one is clicked, the other fades to g ...

javascriptjqueryhtmlcss

REACT performance impacted by slow array filtering

I have a custom listbox feature, where a div holds a vertical list of other div elements. There is also an input field for searching within the list. While it works fine with small data sets, it becomes extremely slow with large amounts of data. In additi ...

javascriptreactjs

Enable users to upload and run JavaScript code on the server

Currently, I am diving into the world of javascript/nodeJS with the goal of creating an ERP solution. My aim is to give ERP end-users the ability to upload their own customized scripts which can then interact with existing ERP scripts. It goes without sayi ...

javascriptnode.jserp

Angular component injected with stub service is returning incorrect value

While attempting to write tests for my Angular component that utilizes a service, I encountered an issue. Despite initializing my userServiceStub property isLoggedIn with true, the UserService property appears false when running the tests. I experimented ...

javascriptangularjasmine

Using jQuery to validate the existence of a link

Within my pagination div, I have links to the previous page and next page. The link to the previous page is structured as follows: <span id="previous"><a href="www.site.com/page/1" >Previous</a>. However, on the first page, there will be ...

javascriptjqueryhtmlcss

Is there a method to generate an endless carousel effect?

Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't ...

javascriptcssscrollcarouselinfinite

How about using AngularJS with JavaScript modules?

I have an old AngularJS app (using version 1.2) and I am trying to organize my code into JavaScript modules. However, I am struggling to figure out how to define the controller as a function within the module. In other words, I want to transition from: & ...

javascriptangularjs

Items seem to vanish into thin air and become immovable when attempting to relocate them

I am attempting to create a unique grid layout with 3x3 dimensions, where each grid item represents a fragment of a single image. These items should have the capability to be dragged and dropped inside another 3x3 grid, in any desired sequence. I have hit ...

javascripthtmlcssdrag-and-dropgrid

Preventing users from navigating away from the page without choosing an answer in a React application

My dilemma involves the implementation of a question component, where I aim to prevent users from leaving a page without selecting an answer. Below is my question component: import React, { Component } from 'react'; import { Link } from 're ...

javascriptreactjsreact-router

Tips for dynamically passing parameters to functions in JavaScript?

Looking for a solution to dynamically receive input from the user in my function: divResize = { myDiv:function(width, height) {...} } divResize.myDiv(100,400); I want to make these numbers interactive and changeable based on user input. How can I achie ...

javascriptjquery

How to send dynamic values to a computed function in Vue.js

Trying to pass an id with the v-model in order to dynamically filter a table without hardcoding names into the function. The goal is for the function to be able to filter both select boxes. The data is referred to as guides, containing attributes such as ...

laravelvue.jsvue-componentlaravel-8vuejs3

What is the best way to access the iframe element?

This is main.html <body> <iframe id="frame" src="frame.html"></iframe> <script type="text/javascript"> document.getElementById('frame').contentWindow.document.getElementById('test').innerHtml = &apos ...

javascriptjqueryhtmliframeparent-child

Building a Multifaceted Website using React and Node.js

I've encountered a rather straightforward issue. My goal is to incorporate a second checkout page into my React and Node Website. I initially believed that the solution would be as simple as adding another 'checkout' Route to the Browser Ro ...

javascriptnode.jsreactjs

Enhance Your jQuery Skills by Adding Custom Directories to Anchor Links

Can jQuery be used to add a custom folder name in front of all links on a webpage? For example, if the website has these links: <a href="/user/login">Login</a> <a href="/user/register">Register</a> <a href="/user/forum">Foru ...

javascriptjqueryhtml

Tips for reintroducing a previously deleted shape into the canvas using Konva

I recently removed a rectangle from the scene using the remove() method. Now, I am trying to figure out how to draw it back. According to the documentation: "remove a node from parent, but don't destroy. You can reuse the node later." Here is the li ...

vue.jskonvajs

Split the text using the newline character (' ') and not the double newline character (' ')

Looking to create a filter that separates all \n and combines them back as \n\n. Is it possible to only target the single \n without affecting the double \n\n? Currently, the issue arises when the input field loses focus, caus ...

javascriptsplitvue.js

Uploading a file with AngularJS and storing it in a database

I have been attempting to implement ngFileUpload in order to upload images and store them in a database – specifically, a mongoLab database that accepts JSON objects which can be posted using this syntax: $http.post('myMongoName/myDb/myCollection/ ...

javascriptangularjsnode.jsexpressng-file-upload

Altering the language code on LinkedIn

As a beginner in programming, I successfully added the linkedin share button to my test webpage. Now, I am hoping to make the button change language based on the user's language selection on the webpage. Linkedin uses a five character language code ( ...

javascriptdjangolinkedin-api