如何在 VueJs 中动态更改网站图标

Question

我想做这个非常常见的技巧，即能够动态更改我的 VueJs 应用程序的图标。

例如：我的应用程序中有一个计时器在后台 运行，我想在计时器为 运行 时更改网站图标。

在 VueJs 中，因为 favicon 是在 index.html 文件中设置的，所以我真的不知道我该怎么做才能在我的应用程序的其他组件中修改它。 ？

我试过this approach但没用

感谢您的帮助

Answer 1

这会有所帮助，它是一个很棒的库，带有适用于 Vue 2 和 3 的实用程序。 VueUse useFavicon

Answer 2

您应该可以获取带有 document.querySelector("link[rel~='icon']") 的图标。

那么，这个 article CSS 技巧应该可以帮助您达到您想要的结果。