2017-10-12 142 views
0

我想在我的VueJS單頁應用程序中包含一個打開的圖形圖像。如何在Vue JS SPA中打開圖形圖像?

https://developers.facebook.com/tools/debug/

息率我這個鏈接預覽:

Link preview on facebook open graph

我想我可以卡住的Open Graph meta標籤頁面的頂部,如果我想所有路線返回相同圖像,但我希望不同的頁面顯示不同的圖像。

我試過https://github.com/declandewet/vue-metahttps://github.com/ktquez/vue-head,但這些似乎沒有幫助,大概是因爲他們在頁面加載後通過JS注入元標記。

除了使用Nuxt或Vue SSR預渲染之外,還有其他方法嗎?

+0

Netifly可以自動預渲染您的SPA頁面,如果您將其託管在那裏。 –

回答

1

prerender-spa-plugin與vue-head/vue-meta一起應該爲你做點訣竅!只要你事先知道你的所有路線,它就會呈現你可以爲機器人服務的index.html文件。

如果您有動態內容,則必須使用captureAfterDocumentEventcaptureAfterTime才能捕獲已呈現的異步內容。

如果你需要更強大的東西Vuejs SSR可能是一個更好的選擇。

+0

我不知道我的路線提前。我在firebase上,並通過在我的託管之前粘貼雲端功能並將直接鏈接的打開圖呈現出來,從而實現了這一目標。對於任何感興趣的人,你可以查看我對這個https://github.com/firebase/firebase-tools/issues/33的回覆。在頁面上搜索TheRoccoB。 – RoccoB