javascript - Vue.js サーバー側レンダリングのコンポーネント

Question

Vue アプリにサーバー側のレンダリングを持たせようとしています。私はvue-server-renderer（https://www.npmjs.com/package/vue-server-renderer）を使用しています。クライアント側のレンダリングは正常に機能しています。

私のアプリの使用vue-routerとaxios

これが私のものserver.jsです：

server.get('*', (request, response) => {
  bundleRenderer.renderToString({ url: request.url }, (error, htmlPromise) => {
    if (error) {
      // Log the error in the console
      console.error(error)
      // Tell the client something went wrong
      return response
        .status(500)
        .send(error)
    }
    response.send(layout.replace('<div id=app></div>', htmlPromise))
  })
})

getInfo()サーバーデータを取得する方法です。

ここにあるgetInfo()：

export default {
  methods: {
    getInfo(api) {
        return axios
          .get(api || this.$route.params.path)
          .then((data) => {
            this.data = data
            this.$set(this, 'isLoading', false)
          })
    },
  },
}

私のサーバーエントリは次のとおりです。

import { app, router, store } from './index'

export default context => {

  let componentPromises = router.getMatchedComponents().filter((component) => {
    return component.methods && component.methods.getInfo
  }).map((component) => {
    return component.methods.getInfo()
  })

  return Promise.all(componentPromises).then(() => {
    return app
  })
}

ただし、 のすべてのコンポーネントにまたはrouter.getMatchedComponents()がないことにすぐに気付きます。したがって、メソッドは機能しなくなります。$route$setgetInfo()

https://router.vuejs.org/en/api/router-instance.htmlのドキュメントは非常に短く、多くの情報を提供していません。

router.getMatchedComponents()

現在のルートに一致するコンポーネント (インスタンスではなく、定義/コンストラクター) の配列を返します。これは主に、サーバー側のレンダリング中にデータのプリフェッチを実行するために使用されます。

どうすれば問題を解決できますか?