Если я буду использовать вложенные маршруты, будут ли вложенные компоненты маршрутов дочерними по отношению к компоненту их родительского маршрута?

Question

В настоящее время у меня есть следующие маршруты:

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

Мне нужен массив markers: [], который заполняется из моей базы данных при выполнении mounted().Этот массив будет использоваться как в компонентах Map, так и Locations.

Что является лучшим способом сделать это.Я могу:

• Иметь свойство markers: [] и mounted() ловушка жизненного цикла в локальном состоянии каждого компонента и просто выполнить вызов axios для каждого компонента.Это означает, что вызовы 2 axios.
• имеют свойство markers: [] и mounted() ловушка жизненного цикла в локальном состоянии родителя этих двух компонентов, а затем пропускают данные к каждому компоненту.Это означает 1-осевой вызов, а затем я просто передаю данные

Однако во втором случае я не знаю, смогу ли я передать данные в Props, так как яне уверен, что компоненты во вложенных маршрутах на самом деле являются потомками родительского элемента.

Answer 1

Короткий ответ - да, если в вашем профиле есть просмотр с помощью маршрутизатора, вы можете получить доступ к маркерам с помощью $ parent или передать его с помощью реквизитов:

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>