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

Question

我正在跟随 Lucie Habere 创建食谱网站 w/Vue Router & Prismic。我遇到的问题是我的 index.vue[=58 上的 prismic-link 组件=] 页面没有为 vue 路由器生成锚标记 href 字段。

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

(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)

而露西的例子确实如此

(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 的一些快照：

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

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

Answer 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;

现场演示仍在运行，因为仍在使用旧版本的工具包:relaxed: 我将在本周晚些时候更新它！

如有任何问题请告诉我们！

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

<prismic-link> component not generating url's for vue router

vue.js

vue-router

prismic.io