从菜单传递页面 ID [英] Passing a page id from menu
问题描述
我对 vue/nuxt 非常陌生，在实现无头 cms 的前端时遇到了这个问题.
我有两条这样的路线
页面
-StandardPage->_standardPage.vue-信息页->_InfoPage.vue我的 _standardPage.vue 和 _infoPage.vue 有这个代码(现在相同但会改变)基本上他们需要一个 guid Id 从 Api 获取页面信息.页面信息包含不同的块，然后是动态生成的组件:
<div><菜单/><div v-for="block in site.blocks";:key="block.id"><component :is="block.blockName";:blockData="block"/></模板><脚本>导出默认{数据(){返回 {地点:对象}},方法: {this.site = 异步方法的结果，调用 api 以通过 guid id 获取页面信息(如何获取此 guid)}}
现在的问题是，在我的菜单组件中，我正在获取菜单显示名称和相应的 pageId(可以随心所欲地添加/删除菜单项，因此我无法事先知道这些 Id)，当我单击我希望将页面 ID 传递到我的标准或信息页面的菜单项，以便他们可以获取相应的数据，但没有成功.
我试图从孩子到父母 $emit，但我没有成功地跨路线做到这一点.如果我使用路径和查询执行 $router.push，我会在 url 中得到一个讨厌的 guid，这看起来不太友好.
将 guid 从菜单组件传递到路由页面的最佳方式是什么?
如果你的父级中有一个按钮看起来像
<button @click="$router.push({ name: 'details-page', params: { guid: '123' } })">测试这在名为 /pages/details-page.vue
您将能够在子项中加载一些数据，具体取决于您的 guid 并且没有丑陋的路径.
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?
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.
这篇关于从菜单传递页面 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
