Vue/Nuxt 비동기 메타 태그 생성
vue.mnuxt의 nuxt에 관한 것입니다.는 용용 we we we we we we we we wenuxt generate정적 html 파일을 생성합니다.이 파일에는 SEO 태그와 og 태그도 포함되어 있어야 합니다.그래서 메타 정보를 생성하기 위해 핵스트(nuxt)를 사용하는 거야
아직까지는 좋아.그러나 현재 네스트된 루트에 비동기적으로 포스트를 로드하는 페이지가 있습니다.그 페이지로 이동하면 Ajax 콜을 통해 투고 데이터가 로딩됩니다.그런 다음 게시물의 메타를 사용하여 다음을 채웁니다.<head>.
는 (된 후) 올바르게 만, 「 정보」를 하면,nuxt generate메타 하지 않습니다.head ().
그래서 우리의 정적 html에는 필요한 메타 정보가 포함되어 있지 않습니다.이에 대해 어떤 해결책이 있을까요?생성 프로세스가 게시물이 로드될 때까지 기다리는 것이 이상적입니다.약속으로 해결할 수 있을까요?아니면 다른 아이디어가 있나요?
서 ★★★★this.post 함수 가 합니다.도우미 함수 generateMetaInfo가 호출되었지만 올바른 데이터를 가지고 있지 않습니다.
head () {
this.log('this.post: ', this.post)
if (this.post) {
return generateMetaInfo(this.post)
}
}
url을 호출할 때는 다음과 같이 투고를 로드합니다.
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()
}
이것은 약속이 해결될 때까지 기다리지 않습니다. : (물론 이것은 타임아웃이 있는 예에 불과합니다.실제에서는, 이것은 Ajax 콜과 교환해 투고의 데이터를 취득할 필요가 있습니다.)
Nuxt는 훌륭한 프레임워크이지만, SEO와 다이내믹 루트에 메타 태그를 할당하는 것은 매우 어렵습니다.그것이 아마 그렇게 좋지 않은 몇 안 되는 이유 중 하나일 것이다.
여기서 가장 중요한 문제는 약속이나 함수가 해결된 후에만 호출되는 메서드에서 메타데이터를 로드하려고 한다는 것입니다. 즉, 페이지가 렌더링될 때까지 메타데이터를 얻을 수 없습니다.나는 이것에 기능이나 약속을 사용하지 않을 것이다.
기본적으로 이 문제를 회피하기 위해서는 모든 메타데이터(게시물 이름과 ID 등을 조합한 것)를 포맷으로 로드해야 합니다.
posts: [
{
slug: 'some_id',
meta: [
{
name: 'title',
content: 'some_title'
},
{
...
]
},
{
...
예를 들어 VueX Store를 사용하면 다음과 같은 문장을 사용할 수 있습니다.
this.$store.state.array.find(p => p.slug === this.$route.params.postSlug).meta
id는 루트 파라미터와 비교하는 임의의 값입니다.그러면 메타데이터 배열이 반환됩니다.
이것은 다소 비효율적이라는 것을 알고 있으며, 대부분의 사람들은 그것을 생각하면 움츠러들 것입니다만, 다이나믹한 루트에서는 매우 효과가 있는 것 같습니다.
my head() 메서드는 다음과 같습니다.
head() {
return {
title: "Title " + this.$route.params.id,
meta: this.$store.state.results.find((result) => result.id === this.$route.params.id).meta
}
}
이건 나한테 딱 맞아.만약 당신이 이것을 시도해 본다면, 나는 그것이 어떻게 진행되는지금은 어때?
건배.
코드 설명
export default {
async asyncData({$content, params}) {
const page = await $content('articles/some-page').fetch()
return {
page: page
}
},
head() {
// remember page is in function asyncData and it had a key title
return {
title: 'Articles: ' + this.page.title
}
}
}
페이지 제목을 "Article + this.page.title의 값이 무엇이든"로 설정합니다.
사용하셔야 합니다.asyncData동적 데이터를 가져오려면(예: api에서) 해당 데이터를 가져오십시오.서버 측에서 가져옵니다.
참고 자료: https://nuxtjs.org/guide/async-data
메타 설정 전 페이지 객체가 존재하는지 확인하십시오.
head() {
if (this.page) {
return {
title: 'Articles: ' + this.page.title
}
}
}
Nuxt 2.15.8에서 작동한 기능
export default {
async asyncData({$content, params}) {
const page = await $content('articles/some-page').fetch()
return {
page
}
},
head() {
// remember page is in function asyncData and it had a key title
return {
title: 'Articles: ' + this.$data.page.title
}
}
}
언급URL : https://stackoverflow.com/questions/51962020/vue-nuxt-async-meta-tags-generation
'sourcecode' 카테고리의 다른 글
| Java: 문자열을 타임스탬프로 변환 (0) | 2022.09.03 |
|---|---|
| 안드로이드:XML을 사용하여 전환 단추에 대해 두 개의 다른 이미지 지정 (0) | 2022.09.03 |
| express 및 vue js를 사용하여 로그인 성공 후 특정 페이지로 리디렉션하는 방법 (0) | 2022.09.03 |
| Java에서는 스레드가 실행 중인지 어떻게 판단합니까? (0) | 2022.09.03 |
| 컴포넌트로 랩된html을 캡처하여 vue.js의 데이터 값을 설정합니다. (0) | 2022.09.03 |