Will the nested routes components be considered children of the parent route's component if I utilize nested routes?

Question

Will the nested routes components be considered children of the parent route's component if I utilize nested routes?

At the moment, I currently have these route configurations:

{ path: '/:username', component: Profile, children: [
    { path: '', component: Map , name: 'Profile'},
    { path: 'locations', component: Locations, name: 'Locations'},
    { path: 'map', component: Map, name: 'Map'}
]},

My goal is to create a markers: [] array that will be populated from my database when the mounted() lifecycle hook executes. This array will then be used in both the Map and Locations components.

I'm contemplating on the best approach to achieve this. Here are my options:

Include the markers: [] property along with the mounted() hook in the local state of each component, resulting in two separate axios calls in each component.
Add the markers: [] property and the mounted() hook to the main parent component of the nested routes, and then pass down the data as props to each component. This method only requires one axios call, but it raises concerns about passing data down through props if the nested components are not direct children of the parent element.

Considering the second scenario, I am uncertain if passing data down as props would work since the nested components may not directly be children of the parent element.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Indeed, the short answer is yes. If your Profile includes a router-view, you have the ability to access markers using $parent or pass them through props:

const Profile = Vue.extend({
  template: `<div>
        Profile {{ markers}}
        <!-- pass as props (used by Loaction) -->
        <router-view :markers="markers"></router-view>
    </div>`,
  data() {
    return {
      markers: []
    }
  },
  mounted() {
    // fake load
    setTimeout(() => {
      this.markers = ['A', 'B', 'C'];
    }, 1000);
  }
})
const Map = Vue.extend({
  template: `<div>
    <!-- uses $parent to get markers -->
    Map {{ $parent.markers}} 
  </div>`,
})
const Locations = Vue.extend({
  props: ['markers'],
  template: `<div>
    <!-- uses props to get markers --> 
    Locations {{ markers}} 
  </div>`,
})


const routes = [{
    path: '/',
    redirect: 'Profile'
  },
  {
    path: '/:username',
    component: Profile,
    children: [{
        path: '',
        component: Map,
        name: 'Profile'
      },
      {
        path: 'locations',
        component: Locations,
        name: 'Locations'
      },
      {
        path: 'map',
        component: Map,
        name: 'Map'
      }
    ]
  }
]
const router = new VueRouter({
  routes
});

new Vue({
  router,
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>


<div id="app">
  <router-view></router-view>
  <router-link :to="{name:'Profile'}">Profile</router-link>
  <router-link :to="{name:'Map'}">Map</router-link>
  <router-link :to="{name:'Locations'}">Locations</router-link>
</div>

Answer 2

Indeed, the short answer is yes. If your Profile includes a router-view, you have the ability to access markers using $parent or pass them through props:

const Profile = Vue.extend({
  template: `<div>
        Profile {{ markers}}
        <!-- pass as props (used by Loaction) -->
        <router-view :markers="markers"></router-view>
    </div>`,
  data() {
    return {
      markers: []
    }
  },
  mounted() {
    // fake load
    setTimeout(() => {
      this.markers = ['A', 'B', 'C'];
    }, 1000);
  }
})
const Map = Vue.extend({
  template: `<div>
    <!-- uses $parent to get markers -->
    Map {{ $parent.markers}} 
  </div>`,
})
const Locations = Vue.extend({
  props: ['markers'],
  template: `<div>
    <!-- uses props to get markers --> 
    Locations {{ markers}} 
  </div>`,
})


const routes = [{
    path: '/',
    redirect: 'Profile'
  },
  {
    path: '/:username',
    component: Profile,
    children: [{
        path: '',
        component: Map,
        name: 'Profile'
      },
      {
        path: 'locations',
        component: Locations,
        name: 'Locations'
      },
      {
        path: 'map',
        component: Map,
        name: 'Map'
      }
    ]
  }
]
const router = new VueRouter({
  routes
});

new Vue({
  router,
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.js"></script>


<div id="app">
  <router-view></router-view>
  <router-link :to="{name:'Profile'}">Profile</router-link>
  <router-link :to="{name:'Map'}">Map</router-link>
  <router-link :to="{name:'Locations'}">Locations</router-link>
</div>

Will the nested routes components be considered children of the parent route's component if I utilize nested routes?

Answer №1

Similar questions

Establishing the properties of an object as it is being structured within a nested data format

When the jquery loop fails to function

Communication between React.js and Node.js in VS Code

When the button is clicked, update the text within the <script> tags utilizing jQuery, JavaScript, or PHP

Web browser local storage

The function 'fn' is either undefined or not an object within the require-jquery.js script at Line 2813

Error in server file of NextJS due to Typescript issue

Setting dropdown list values with Angular

Excluding form items that are disabled from a request in ReactJS

Is there a way to utilize the outcome of a method in multiple sections of the HTML code?

What could be the reason behind the undefined return value of val()?

Tips on how to toggle/close a dropdown menu that is displayed on a different page using Vue

Reveal the inner workings of functions within the Vuex Plugin

When configuring lint-staged, a file is created that includes a unique identifier with details on the packages that have been

basic tiptap add-on or advanced prosemirror module

The Express.js middleware seems to be malfunctioning, as it is causing an excessive number of redirects

What is the best way to add an inset shadow with a transparent background in SVG?

Mastering the art of effectively capturing and incorporating error data

Improving JavaScript Functions: Minimize duplication of helper methods

Creating personalized Stop and Play controls for Swiper.js Autoplay feature in a React/Next project