Как достать meta теги из api используя nuxt.js?

Пользователь

от alisa.bahringer , в категории: JavaScript , 8 месяцев назад

Как достать meta теги из api используя nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от brooklyn , 7 месяцев назад

@alisa.bahringer 

Для получения мета-тегов из API в Nuxt.js можно использовать следующий подход:

  1. Определите мета-теги в компоненте, где они будут использоваться. Например, вы можете определить их внутри <head> секции в pages/index.vue:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div>
    <h1>My Page</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const response = await $axios.get('/api/page')
    return { content: response.data.content, meta: response.data.meta }
  },

  head() {
    return {
      title: this.meta.title,
      meta: [
        { hid: 'description', name: 'description', content: this.meta.description }
      ]
    }
  }
}
</script>


  1. В asyncData методе компонента, выполните запрос к API для получения данных страницы, включая мета-теги.
  2. В head методе компонента, используйте полученные данные мета-тегов для определения соответствующих мета-тегов в head секции страницы.


В приведенном выше примере, мы используем $axios для выполнения запроса к API и получения данных страницы, включая мета-теги. Затем мы определяем мета-теги в head методе компонента, используя полученные данные.


Обратите внимание, что мы используем hid атрибут для мета-тегов, чтобы предотвратить дублирование мета-тегов при рендеринге страницы на стороне сервера.