如何解决Vue Vant中ImagePreview图片预览功能的问题？

本文共计1415个文字，预计阅读时间需要6分钟。

如果您在搜索时找到了这篇文章，或许那位外估计算您遇到了和我类似的困扰。立即打开图片预览功能后，若未关闭预览图片，同时更改路径描述，会发现即使用户未关闭预览图，路径变更也会立即反映在预览图片中。

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：

着实让员外百思不其解，在调用vant 的 ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview 和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的beforeRouteLeave 钩子中关闭这个 ImagePreview 也实现不了，因为根本就拿他没有一点办法。同时可以看到，这个图片预览的 html 是挂载在 window 上面的，实在是太 难为初学者了。

#第一种解决办法

后来多方请教，终于请到一位大佬，为员外指点迷津。