使用 Apollo 和 Vue 路由器重命名页面

Question

我想根据 Apollo 收到的数据重命名页面标题。

例如，在 url myproject.com/media/title1，我的 GraphQL 回复将是：

{
  "data": {
    "creation":
      {
        "id": "1",
        "title": "Title1",
        "creationDate": "2019-09-22 07:37:57 UTC",
        "coverUrl": "linktomedia.com/image.jpg",
      }
  }
}

我想把data -> creation -> title中的标题作为我的扉页名称。

我该怎么做？

谢谢。

Answer 1

vue-apollo 智能查询提供一个 result 回调，在查询完成时调用。您可以在回调内完成任何依赖于数据的操作，包括更改标题。类似于：

apollo: {
  creation: {
    query: YOUR_QUERY,
    result: ({ data }) => {
      document.title = data.creation.title
    },
  }
}

使用 Apollo 和 Vue 路由器重命名页面

Rename page with Apollo & Vue router

apollo

vue.js

graphql

vue-router