Vue.js服務器端渲染組件

我想讓我的Vue應用程序有服務器端渲染。我正在使用vue-server-renderer（https://www.npmjs.com/package/vue-server-renderer）。客戶端呈現工作正常。Vue.js服務器端渲染組件

我的應用程序使用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（）

返回的組件的陣列（定義/構造，不實例）與當前路線相匹配。這主要用於在服務器端渲染期間執行數據預取。

我怎樣才能解決這個問題？

來源

2016-11-18 pexea12

而這也正是商店踢在Vuex概念可以存儲來自異步API提取跨越所有部件共享的對象數據。結帳https://github.com/vuejs/vue-hackernews-2.0 –

我以前通過執行以下操作發生類似的問題，並設法成功地預取數據：

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) 
    } 
},

來源

2017-09-09 12:06:03 Davide

Vue.js服務器端渲染組件

回答

相關問題