如何在Vue JS SPA中打开图形图像？

Question

我试图在我的VueJS单页面应用程序中包含一个打开的图形图像。

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

让我知道这个链接预览：

如果我希望所有路线都返回相同的图像，我想我可以在页面顶部插入打开的图元标记，但我希望不同的页面显示不同的图像。

我已尝试https://github.com/declandewet/vue-meta和https://github.com/ktquez/vue-head，但那些似乎没有帮助，大概是因为他们在页面加载后通过JS注入元标记。

除了使用Nuxt或Vue SSR进行预渲染之外还有其他方法吗？

Answer 1

prerender-spa-plugin与vue-head / vue-meta一起应该为你做的伎俩！只要您事先知道所有路线，它就会呈现您可以为机器人服务的index.html文件。

如果您有动态内容，则必须使用captureAfterDocumentEvent或captureAfterTime才能捕获已呈现的异步内容。

如果您需要更强大的Vuejs SSR可能是更好的选择。

Answer 2

我遇到了同样的问题，就我而言，服务器端渲染不是一种选择。所以我不得不仔细研究一下。然后我找到了Vue-meta库，并从中完成了工作。

此库的优点是，您可以在组件中添加所需的所有元标记。并将注入html head标签。