1

Нужно добавить на одном конкретном роуте своё мета свойство.

введите сюда описание изображения

в файле nuxt.config.js прописал:

router: {
  extendRoutes(routes, resolve) {
    routes.push({
              path: '/app',
              component: resolve(__dirname, 'pages/app/index.vue'),
              meta: {
                test: 'asdasd'
              }
    })
  }
}

Эффекта никакого.

Если так:

  router: {
    extendRoutes(routes, resolve) {
      return [
        {
          name: 'app',
          path: '/app', 
          component: resolve(__dirname, 'pages/app/index.vue'),          
          meta: {
            test: 'asdasd'
          }
        },
      ]
    }
  },

то работает, но теряются все остальные роуты, это придётся вообще все роуты вручную вписывать, а их оч много. Что можно сделать?

2 ответа 2

1

Используя Локальные настройки в компоненте (pages/app/index.vue), который указан, для вашего особенного роута, заполните свойство head, чтобы сформировать особенные метаданные для этого роута:

<script>
export default {
  ...
  head: {
    meta: [
      {
        hid: 'test',
        name: 'test',
        content: 'asdasd'
      },
      ...
    ],
  }
}
</script>

При использовании head как метода - вы получаете доступ к контексту this и соответственно к существующим, в нем, данным:

<script>
    export default {
      data(){
       return {
        test: 'asdasd'
       }
      },
      head() {
       return {
         meta: [
          {
            hid: 'test',
            name: 'test',
            content: this.test
          },
          ...
        ],
       }
      }
    }
    </script> 

Более подробно вы можете прочитать в документации Nuxt - Мета-теги и SEO

0

Да, выше хорощий пример, как нужно сделать. Просто нужно определить head как функцию, и там динамически подставлять данные из meta роутера.

Потому, что если определить head как функцию, то получаем доступ к контексту приложения nuxt + this локального компонента.

Советую почитать статью, как работать с мета-тегами в приложении Nuxt. Там даже пример к похожим контекстом приведён.

3
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. 18 окт 2021 в 19:36
  • добро пожаловать на stack overflow на русском! стоило опубликовать это как комментарий, а не ответ. чтобы вам стали доступны комментарии к чужим сообщениям, надо набрать пятьдесят баллов репутации — это всего пять голосов «за» любой ваш ответ или вопрос 18 окт 2021 в 19:37
  • понял, благодарю, буду дальше разбираться, помогать ответами :) удивляет настолько быстрая реакция на ответ, круто!
    – Alexander
    18 окт 2021 в 19:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.