Привет, ребята, эта статья посвящена доступу к данным страницы в объектах маршрута. Я часто сталкиваюсь с этим вариантом использования, например, при создании файлов Sitemap.

Страницы Nuxt позволяют определять структурные данные, такие как свойство meta или свойство auth из @ nuxtjs / auth (обратите внимание, что их не следует путать с метатегами). Было бы здорово иметь доступ к ним где-нибудь еще. К объекту маршрута можно получить доступ во многих местах:

  • context.route in asyncData
  • this.$route.meta в компонентах
  • this.extendRoutes в модулях
  • context.route в промежуточном программном обеспечении

Я провел некоторое тестирование и обнаружил, что единственная возможность доступа к данным страницы за пределами страниц - это asyncData и промежуточное программное обеспечение, как обсуждалось в этой проблеме. Все остальные места не работают и имеют meta пустые объекты. Кроме того, случай, обсуждаемый в связанной проблеме, добавляет свойство meta в сам объект маршрута, а не в массив matched, как в vue-router (см. Пример из vue-router).

Хорошо, это текущее состояние. Теперь, как мы можем это исправить и добавить данные страницы к объектам маршрутизации?

nuxt-route-meta

Я написал модуль nuxt-route-meta, который делает это, анализируя компоненты страницы во время сборки и добавляя данные в маршруты через this.extendRoutes. Это модуль с нулевой конфигурацией, поэтому вы можете просто добавить его в свой nuxt.config.js, и он будет работать из коробки.

Сначала установите его через npm install nuxt-route-meta.

Затем добавьте его в свой nuxt.config.js:

Теперь давайте создадим страницу с такими данными:

Мы уже закончили настройку! Давайте рассмотрим случаи, рассмотренные выше:

asyncData:

this. $ route.meta:

this.extendRoutes:

Промежуточное ПО:

Как мы видим, теперь мы можем получить доступ к данным страницы везде! Это уже о том, как использовать модуль.

Создание карты сайта с маршрутами без авторизации

Распространенным вариантом доступа к данным страницы является создание карты сайта, особенно условное добавление записей в карту сайта. Теперь мы настроим @nuxtjs/sitemap только добавление маршрутов без авторизации. Итак, давайте добавим модуль карты сайта через npm install @nuxtjs/sitemap и добавим его в нашу конфигурацию:

Теперь фильтровать маршруты просто, потому что нам нужно только проверить свойство meta:

И все, если вы отметите /sitemap.xml, вы должны увидеть только маршруты без авторизации!

Заключение

Это было введение в nuxt-route-meta. Надеюсь, он вам пригодится! Если нравится, смело оставляйте звезду на звездочке на GitHub 🌟. Кроме того, модуль, вероятно, нуждается в доработке, поэтому, если вам что-то нужно или есть ошибка, сообщите о проблеме. Спасибо за прочтение!

Если вам нравится то, что я делаю, подпишитесь на меня в Twitter или загляните на мой сайт. Также рассмотрите возможность пожертвования в Купи мне кофе, PayPal или Patreon. Большое спасибо! ❤️

Первоначально опубликовано на sebastianlandwehr.com

Больше контента на plainenglish.io