Nuxt JS Добавить своё мета свойство в один конкретный роутер

Question

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

в файле 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'
          }
        },
      ]
    }
  },

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

Answer 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

Answer 2

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

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

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

БЛОГ НА HUSL

Nuxt JS Добавить своё мета свойство в один конкретный роутер

Ответы (2 шт):