如何在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头标记。