Привет, ребята, эта статья посвящена доступу к данным страницы в объектах маршрута. Я часто сталкиваюсь с этим вариантом использования, например, при создании файлов Sitemap.
Страницы Nuxt позволяют определять структурные данные, такие как свойство meta или свойство auth из @ nuxtjs / auth (обратите внимание, что их не следует путать с метатегами). Было бы здорово иметь доступ к ним где-нибудь еще. К объекту маршрута можно получить доступ во многих местах:
context.route
inasyncData
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