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或$set。因此，方法getInfo()停止工作。

来自https://router.vuejs.org/en/api/router-instance.html的文件很短，并没有提供太多信息：

router.getMatchedComponents（）

返回组件的数组（定义/构造函数，不是   实例）与当前路由匹配。这主要用于期间   服务器端呈现以执行数据预取。

我该如何解决问题？

Answer 1

我之前遇到过类似的问题，并通过执行以下操作成功预取数据：

app.$router.onReady(() => {
   const matchedComponents = app.$router.getMatchedComponents()

   if (!matchedComponents.length) { /* ... */}

   Promise.all(matchedComponents.map((Component: any) => {
     if (Component.options.methods.asyncData) {
       return Component.options.methods.asyncData({
         store: app.$store,
         route: app.$router.currentRoute
       });
     }
   })).then(() => { /* your callback here ... */ });
}

根据vue ssr文档（https://ssr.vuejs.org/en/data.html），建议的方法是在组件中使用自定义asyncData方法来执行数据提取，而不是直接调用组件方法：

export default {
   asyncData ({ store, route }) {
      // return the Promise from the action
      return store.dispatch('fetchItem', route.params.id)
   }
},

Vue.js服务器端呈现中的组件

1 个答案: