个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我们有一个用 vue.js 和 nuxt 构建的网页。我们使用 nuxt generate生成静态 html 文件，其中还应包含 SEO 和 og 标签。
这就是我们使用 nuxt's head () 的原因。生成元信息。
到目前为止，一切都很好。
但是现在我们有一个页面可以将帖子异步加载到 nested route 中。 .如果您转到该页面，它会通过 ajax 调用加载帖子的数据。然后它将使用帖子的元数据来填充 <head> .
元信息会在一段时间后正确更新(加载帖子后)但是当我们使用 nuxt generate 时当我们使用 head () 生成元信息时，帖子的数据和元信息不存在.
这就是为什么我们的静态 html 不包含必要的元信息。
对此有什么可能的解决方案？
理想的情况是生成过程等待帖子被加载。可以用promise解决吗？还是有其他想法？
这里this.post首先设置为false。
我们的辅助函数 generateMetaInfo 被调用，但显然没有正确的数据。
head () {
this.log('this.post: ', this.post)
if (this.post) {
return generateMetaInfo(this.post)
}
}
getPost () {
// Only if postSlug is present
if (this.$route.params.postSlug) {
// If postslug > try to get it from store
if (this.getCompletePostBySlug(this.$route.params.postSlug)) {
this.activePost = this.getCompletePostBySlug(this.$route.params.postSlug)
}
// if it is not in store get it via axios
else {
const ax = axios.create({
baseURL: `${window.location.origin}/${this._checkRouteByString('programm') ? 'events' : 'posts'}`
})
ax.get(`posts.${this.$i18n.locale}.${this.$route.params.postSlug}.json`)
.then((response) => {
const newActivePost = response.data && response.data.items ? response.data.items.find(p => p.slug === this.$route.params.postSlug) : false
if (newActivePost) {
this.post = newActivePost
this.$store.dispatch('data/saveCompletePosts', this.activePost)
} else {
this.post = '404'
}
})
.catch((error) => {
// console.log(error.response)
})
}
} else {
this.setActivePost()
}
},
methods: {
getPostMeta: async function () {
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
const result = {
title: 'Promise Title Test',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'keywords', content: 'keyword 1, keyword 2'},
{ hid: 'description', name: 'description', content: 'PROMISE. This is the generic promise descr.'}
]
}
resolve(result)
}, 1000)
})
let result = await promise
console.log('result: ', result)
return result
}
},
head () {
return this.getPostMeta()
}
最佳答案
Nuxt 是一个很棒的框架，但是 SEO 和在动态路由上分配元标记非常困难。这可能是它不太好的极少数原因之一。
我认为这里的主要问题是您试图从仅在 promise 或函数解决后调用的方法中加载元数据，这意味着在页面呈现之前它永远不会获取元数据。我不会为此使用函数或 promise 。
本质上，我发现解决此问题的方法是您需要以格式加载所有元数据(加上您的帖子名称作为 id 或其他内容)
posts: [
{
slug: 'some_id',
meta: [
{
name: 'title',
content: 'some_title'
},
{
...
]
},
{
...
this.$store.state.array.find(p => p.slug === this.$route.params.postSlug).meta
head() {
return {
title: "Title " + this.$route.params.id,
meta: this.$store.state.results.find((result) => result.id === this.$route.params.id).meta
}
}
关于javascript - Vue/Nuxt 异步元标记生成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51962020/
24
4
0
我从这里复制了一些文件:https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed
我已经在整个互联网上搜索了我的问题的答案。到目前为止没有运气。 我想要达到的目标: 我有一个在通用模式下运行的 Nuxt 应用程序。它类似于一个小型社交网络，用户可以在其中创建自己的个人资料并分享他们
在我的 nuxt 应用程序中，嵌套目录中的组件不会按预期自动导入。对于我的一些组件，我有如下内容:vue 2.6.12 , nuxt 2.15.0components\目录结构 TopArea\ --
我有点困惑，因为在官方 nuxt 网站上它说当前的 nuxt 版本是 2.5.X 但是当我使用 npx create-nuxt-app 创建 nuxt 应用程序时并检查 package.json在依赖
我有survey-vue(surveyJS)在dev上运行良好，但是当我尝试部署时，登陆带有调查组件的页面时出现最大调用堆栈大小超出错误。 我在想这就是我导入插件的方式，但我不确定。 插件/surve
我有如下路径 路径:'/board/:type(\d{2}):subtype(\d{2}):id(\d+)' 所以这是这样的 http://localhost:3000/board/112233333
我构建多应用 Nuxt 项目，这些应用之间不直接通信。每个应用程序都有自己的商店，我想为共享商店使用一个目录。我将这种方法用于组件并且效果很好。 |-> app1 | |-> store // s
将我的 nuxt-cli 版本升级到 2.15.3 后，我注意到页面 block 的大小减小了，所有 node_modules 安装的包现在都被捆绑到现在变得越来越大的 app.js 中。 在下面你可
我正在使用 nuxt 生成完整的静态 Web 应用程序，如下所述 https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applic
我已经看到很多与此主题相关的问题。但是他们都没有解决我的问题。 我有一个情况，我必须检查 innerWidth窗口，使用 isMobile 检查设备是否可移动多变的。 ...
我在最新版本的 Vuetify 中使用 NuxtJs。 在我的导航栏中有一个通向主页的主页按钮，这是它的代码: mdi-home 只要我在主页上，图标就会悬停: 一旦
我有一个登录页面，我希望登录的用户无法看到。我的组件如下: ... ... @Component({ layout: 'fullWidth', auth: '
我正在创建一个插件，它将发出由套接字触发的基本 nuxt 事件。然后将收到 nuxt 事件并打开一个 snackbar 。在组件内部时，使用 $nuxt 可以轻松发送和接收事件。 this.$nuxt
我有一个Composable，它返回一个函数，在5秒的间隔内验证身份验证和刷新令牌。两者都利用Nuxt的useCookie实用程序函数来执行其背后的逻辑。。起初，它是有效的。但有时，当令牌到期时，它会
我不能在这里使用 window.location，因为它是 SSR 应用程序。useRouter、useRoute 和 useNuxtApp 也没有域名。nuxtApp.ssrContext 未定义。
我在 nuxt.js 上有前端服务器，在带有 django-rest-framework 的 django 中有后端。谁能给我一个使用 nuxt-auth 本地策略刷新 jwt token 的例子？我
有很多关于 Nuxt SSR 或全静态的信息，但我找不到任何指南如何构建具有静态页面的混合 SSR。 我正在使用 Nuxt SSR 构建一个网站，我想从一个 10MB 的 JSON 文件静态预渲染所有
我在本地构建了nuxt js的项目，即npm run build，然后将项目推送到.nuxt文件夹，而不是node_modules文件夹。然后运行npm run start命令，失败。 输出信息:sh
我有一个 NUXT 项目，我正在尝试添加 301 重定向。我尝试了几种不同的方法，但没有任何效果。如果我转到旧 URL，我会得到一个 404 页面。 向 Nuxt 项目添加重定向的最佳方式是什么？ 任
我正在使用 Nuxt Content存储应用程序内容(JSON 文件)。它在热重载的开发模式下工作很酷。我网站的后端更改内容文件夹中的任何文件，并且这会立即在浏览器中更改而无需重新加载页面。但在生产模
我是一名优秀的程序员,十分优秀！