我正在构建一个项目,其中我的所有数据(包括页面路由)都来自 GraphQL 端点,但需要通过静态站点托管(我知道,我知道。不要让我开始)。
我已经设法使用 nuxt.config.js
中的以下代码从数据中静态生成路由:
generate: {
routes: () => {
const uri = 'http://localhost:4000/graphql'
const apolloFetch = createApolloFetch({ uri })
const query = `
query Pages {
pages {
slug
template
pageContent {
replaced
components {
componentName
classes
body
}
}
}
}
`
return apolloFetch({ query }) // all apolloFetch arguments are optional
.then(result => {
const { data } = result
return data.pages.map(page => page.slug)
})
.catch(error => {
console.log('got error')
console.log(error)
})
}
}
我试图解决的问题是某些页面需要使用与默认布局不同的布局,要使用的正确布局在 GraphQL 数据中指定为 page.template
但我不知道看不出有什么方法可以将该信息传递给路由器。
我尝试将 return data.pages.map(page => page.slug)
更改为:
return data.pages.map(page => {
route: page.slug,
layout: page.template
})
但这似乎是行不通的。有谁知道如何将布局首选项传递给 vue 路由器?
最佳答案
一种方法是将数据注入(inject)有效负载 https://nuxtjs.org/api/configuration-generate#speeding-up-dynamic-route-generation-with-code-payload-code- 这将允许您将生成信息传递到路由本身。
关于vue.js - 为动态生成的 nuxt 页面选择布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53379201/