1

I am very new to vue/nuxt and got stuck with this issue when implementing the frontend for a headless cms.

I have two routes as such

Pages

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

My _standardPage.vue and _infoPage.vue has this code (same for now but will change) Basicly they need a guid Id to fetch page information from the Api. The page information contains different blocks that then are dynamicly generated components:

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

now the problem is that in my menu component im doing a fetch to get the menu display name and corresponding pageId (menu items can be added/removed on a whim so I have no way of knowing beforehand those Ids), When I click a menu item i wish to pass along the page Id to my standard or info page so they can fetch corresponding data but to no success.

I have tried to $emit from child to parent but I have no success in doing that across routes. If i do a $router.push with path and query I get a nasty guid in the url and that does not look very friendly.

What would be the best way to pass my guid from my menu component to my routed pages?

kissu
  • 40,416
  • 14
  • 65
  • 133
darrrr
  • 43
  • 1
  • 8
  • So, this does work with some query params, right? https://router.vuejs.org/guide/essentials/navigation.html#router-push-location-oncomplete-onabort – kissu Jun 24 '21 at 08:18
  • If im using router push with name instead of path I can send the first guid I click in the menu but it remains static and sends the same guid after that no matter the menu item i click. Maybe I set it up wrong somehow? – darrrr Jun 24 '21 at 08:31
  • You should usually prefer to use `name` than `path` and of course, name your components in that case. – kissu Jun 24 '21 at 08:36

1 Answers1

1

If you do have a button in your parent looking like

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

and this in the child named /pages/details-page.vue

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

You'll be able to load some data in the children, depending of your guid and without an ugly path.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Hi and thanks, almost there! however if I now have 2 or more 'DetailsPage' and navigate between them they point to the same route and send the same id. for example i have pages a,b,c (all detail pages), I click page a and guid 1 gets logged, i now click page b and guid 1 still gets logged – darrrr Jun 24 '21 at 08:52
  • 1. you should have a unique name for your pages. 2. if you can't have a unique file that does all of your cases, you can indeed split them into several pages. 3. if you want to send to various pages, you'll need to send some dynamic `.push({ name: dynamicName })` and probably also update the `guid` value depending on which element you do click on. 4. I can't help more without any code on this part. Maybe try to see with your devtools or some `console.log` what you're actually passing with your router, but this should work fine as shown in my example. – kissu Jun 24 '21 at 08:57
  • Thanks, maybe I explained to problem badly, however you put me in a good direction and in the end I decided to use vuex to just update/hold the current page guid for easy access. – darrrr Jun 24 '21 at 10:01