<prismic-link> 组件没有为 vue 路由器生成 url答案

【问题标题】：<prismic-link> component not generating url's for vue router<prismic-link> 组件没有为 vue 路由器生成 url
【发布时间】：2021-12-05 18:58:22
【问题描述】：

我正在跟随 Lucie Habere 创建一个带有 Vue Router 和 Prismic 的食谱网站。我遇到的问题是我的 index.vue 页面上的 prismic-link 组件没有生成锚标签 href em> Vue 路由器的字段。

在查看开发工具时，我发现在我的响应中，结果对象 url 字段为空白，而在示例站点页面上，它返回页面的相对路径：

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

因此，显然 prismic-link 生成的锚标记具有 href="" 属性值。我认为这就是问题所在。

我还注意到我对 Prismic 的初始查询不包括查询参数：

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

而 Lucie 的例子是这样的

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

我还在 vue.config.js 文件中添加了“runtimeCompiler :true”。一切都无济于事。我不知道问题是否出在我的内容建模上，因为您无法从视频中看到 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 的一些快照：

巧合的是，我克隆了她的仓库并发生了同样的问题。然而演示站点工作正常。

感谢任何帮助解决这个问题。

【问题讨论】：

实际上，示例中的演示也出现了同样的问题。如果你转到github.com/lihbr/prismic-demo-the-last-straw 并克隆它并运行它，你会遇到同样的问题

标签： vue.js vue-router prismic.io

【解决方案1】：

露西在这里~

确实，在 Alex 的直播中，我们使用了 alpha 版本的套件。此后，我们发布了对底层客户端工具包的一些重大更改（因为我们处于 alpha 阶段）：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;

现场演示仍在工作，因为仍然使用旧版本的套件：放松：我将在本周晚些时候更新它！

如果有任何事情请告诉我们！

【讨论】：