Блог

Я очень новичок в vue/nuxt и столкнулся с этой проблемой при реализации интерфейса для безголовой cms.

У меня есть два маршрута как таковые

Страницы

 -StandardPage
    ->_standardPage.vue
-InfoPage
    ->_InfoPage.vue
 

У моих _standardPage.vue и _infoPage.vue есть этот код (пока тот же, но изменится) В основном им нужен идентификатор guid для получения информации о странице из Api. Информация о странице содержит различные блоки, которые затем являются динамически сгенерированными компонентами:

 <template>
 <div>
  <Menu />
   <div v-for="block in site.blocks" :key="block.id">
    <component :is="block.blockName" :blockData="block"/>
   </div>
 </div>
</template>

<script>
export default{
  data(){
  return {
    site: Object
  }},
  methods: {
    this.site = result from async method, calling api to get page info by guid id (how do i get a hold of this guid)
  }
}
 

теперь проблема в том, что в моем компоненте меню я выполняю выборку, чтобы получить отображаемое имя меню и соответствующий идентификатор страницы (пункты меню могут быть добавлены/удалены по прихоти, поэтому у меня нет возможности заранее узнать эти идентификаторы), Когда я нажимаю пункт меню, я хочу передать идентификатор страницы на свою стандартную или информационную страницу, чтобы они могли получить соответствующие данные, но безуспешно.

Я пытался передать $от ребенка к родителю, но у меня не получилось сделать это по всем маршрутам. Если я сделаю $router.push с помощью пути и запроса, я получу неприятный идентификатор guid в URL-адресе, и это выглядит не очень дружелюбно.

Как лучше всего передать мой идентификатор guid из компонента меню на мои маршрутизируемые страницы?

Если у вас есть кнопка в вашем родителе, которая выглядит так

 <button @click="$router.push({ name: 'details-page', params: { guid: '123' } })">
  test
</button>
 

и это в ребенке по имени /pages/details-page.vue

 <script>
export default {
  name: 'DetailsPage',
  async fetch() {
    console.log('route', this.$route.params.guid)
    await axios...
  },
}
</script>
 

Вы сможете загружать некоторые данные в детей, в зависимости от вашего guid и без уродливого пути.