Как достать meta теги из api используя nuxt.js?
1 ответ
от
brooklyn ,
7 месяцев назад
@alisa.bahringer
Для получения мета-тегов из API в Nuxt.js можно использовать следующий подход:
- Определите мета-теги в компоненте, где они будут использоваться. Например, вы можете определить их внутри <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> |
- В asyncData методе компонента, выполните запрос к API для получения данных страницы, включая мета-теги.
- В head методе компонента, используйте полученные данные мета-тегов для определения соответствующих мета-тегов в head секции страницы.
В приведенном выше примере, мы используем $axios для выполнения запроса к API и получения данных страницы, включая мета-теги. Затем мы определяем мета-теги в head методе компонента, используя полученные данные.
Обратите внимание, что мы используем hid атрибут для мета-тегов, чтобы предотвратить дублирование мета-тегов при рендеринге страницы на стороне сервера.
15