复制指向突出显示的内容的链接无效的解决办法

“复制指向突出显示的内容的链接”或者“copy link to highlight”是浏览器的一个鲜为人知的功能

通过这个链接打开页面，可以高亮并直接滚动到对应的位置

它是一个很不错的分享方式，然而如果你要广泛地使用这种方式来分享你的网站，你可能会遇到一些问题。其中最明显的一个问题就是异步加载的页面（例如用Vue和React构建的SPA网站），由于内容一开始可能没加载出来，导致没法定位到要高亮的位置。甚至vue还会直接删除掉#:~:text=后面的内容。

解决办法是可以用一行代码在内容加载出来之后再高亮。

location.hash = ':~:text=' + performance.getEntriesByType("navigation")[0].name.split(':~:text=')[1]

执行这行代码会让浏览器立即高亮并滚动到指定的位置。

你可以在api接口请求完成之后，或者在onMounted的hook中执行这行代码来达成你想要的效果。