Блог

Главная - Вопросы по программированию - компонент не генерирует URL-адреса для маршрутизатора vue

компонент не генерирует URL-адреса для маршрутизатора vue

#vue.js #vue-router #prismic.io

Вопрос:

Я вместе с Люси Хабере создаю сайт рецептов с маршрутизатором Vue и Prismic. Проблема, с которой я сталкиваюсь, заключается в том, что компонент prismic-link на моей странице index.vue не генерирует поле привязки тегов href для маршрутизатора vue.

Просматривая инструменты разработки, я вижу, что в моем ответе поле url объектов результатов пустое, где, как и на странице примера сайта, он возвращает относительный путь к странице:

(i.e. url "/recipes/gluten-free-oat-dumplings").

Итак, очевидно, что теги привязки, которые генерирует prismic-link, имеют значения атрибутов href=»». И в этом, я полагаю, заключается проблема.

Также я заметил, что мой первоначальный запрос к Prismic не включает параметры запроса:

(https://mybestrecipes.cdn.prismic.io/api/v2/documents/search?ref=YWhMghIAAElp5kmPamp;q=[[at(document.type, "recipe")]]amp;pageSize=100)

в то время как пример Люси делает

(https://the-last-straw.cdn.prismic.io/api/v2/documents/search?ref=YRv4vBIAAB8AWKJmamp;q=[[at(document.type, "recipes")]]amp;routes=[{"type":"home","path":"/"},{"type":"recipes","path":"/recipes/:uid"}]amp;pageSize=100).

Я также добавил добавленный «runtimeCompiler:true в vue.config.js досье. Все безрезультатно. Я не знаю, связана ли проблема с моим моделированием контента, потому что вы не видите схему Prismic из видео. Вот мой prismic.js:

 import { createPrismic } from "@prismicio/vue";

const prismic = createPrismic({
  endpoint: "mybestrecipes",
  clientConfig: {
    defaultParams: {
      routes: [
        { type: "home", path: "/" },
        { type: "recipe", path: "/recipe/:uid" },
      ],
    },
  },
});

export default prismic;

Вот несколько снимков из devtools:

url=quot;null

Теги

Заголовки

По совпадению, я клонировал ее репозиторий, и возникла та же проблема. И все же демонстрационный сайт работает нормально.

Приветствуется любая помощь в исправлении этого.

Комментарии:

1. На самом деле демонстрация из примера демонстрирует ту же проблему. Если вы перейдете github.com/lihbr/prismic-demo-the-last-straw и клонируя его и запуская, вы получаете ту же проблему

Ответ №1:

Люси здесь~

Действительно, на стриме с Алексом мы использовали альфа-версию комплекта. С тех пор мы выпустили некоторые важные изменения в базовом клиентском наборе (потому что мы находимся в альфа-версии): routes параметр больше не вложен defaultParams , теперь вы должны быть в порядке с чем-то вроде этого:

 import { createPrismic } from "@prismicio/vue";

const prismic = createPrismic({
  endpoint: "mybestrecipes",
  clientConfig: {
    routes: [
      { type: "home", path: "/" },
      { type: "recipe", path: "/recipe/:uid" },
    ],
  },
});

export default prismic;

Живая демонстрация все еще работает, потому что все еще используется старая версия комплекта:relaxed: я обновлю ее позже на этой неделе!

Дайте нам знать, если что-нибудь случится!

Метки: