从菜单传递页面 id

Question

我对 vue/nuxt 非常陌生，在为无头 cms 实现前端时遇到了这个问题。

我有两条这样的路线

页面

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

我的 _standardPage.vue 和 _infoPage.vue 有这个代码（现在相同，但会改变）基本上他们需要一个 guid Id 来从 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)
  }
}

现在的问题是，在我的菜单组件中，我正在获取菜单显示名称和相应的 pageId（菜单项可以随心所欲地添加/删除，所以我无法事先知道这些 ID），当我单击我希望将页面 ID 传递到我的标准或信息页面的菜单项，以便他们可以获取相应的数据但没有成功。

我曾尝试将 $emit 从子级发送到父级，但跨路由执行此操作没有成功。如果我使用路径和查询执行 $router.push，我会在 url 中得到一个讨厌的 guid，这看起来不太友好。

将 guid 从菜单组件传递到路由页面的最佳方式是什么？

Answer 1

如果你的父母中有一个按钮看起来像

<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 在子项中加载一些数据，并且不会出现丑陋的路径。