Vuejs 重用相同的 HTML 元素答案

【问题标题】：Vuejs reusing same HTML elementsVuejs 重用相同的 HTML 元素
【发布时间】：2020-04-04 18:20:59
【问题描述】：

我在这里使用这个延迟加载指令：

https://itnext.io/lazy-loading-images-with-vue-js-directives-and-intersectionobserver-d0eb390cad9

      <li v-for="entry in entries">
          <router-link :to="'/d/' + entry.title">
            <img :title="entry.title" :data-url="entry.imageUrl" v-lazyload />
          </router-link>
      </li>

问题是每当路由更改到另一个url时，屏幕上显示的第一组图像与上一页上的图像相同！

似乎 vuejs 正在将 HTML 元素从另一个页面重用到下一个页面，但lazyload 指令并没有意识到这一点。如何防止这种情况发生并强制 Vue 重新渲染元素？

【问题讨论】：

尝试将:key="$route.fullPath" 添加到您的<router-view /> 中，类似<router-view :key="$route.fullPath"/>
行得通.. tx
@SpiritOfDragon 你应该为这篇文章做出回答，这样它就会被标记为完成。
感谢您的建议。我已经发布了答案。 @Alex，如果您可以将答案标记为完整，这将对正在寻找答案的其他人有所帮助。谢谢！

标签： javascript html vue.js

【解决方案1】：

问题在于组件被重用，因为 Vue 认为只有数据被更改。要解决这个问题，您应该告诉 Vue 在路径更改时重新渲染组件。为此，您可以为 <router-view /> 提供唯一密钥

类似这样的：

<router-view :key="$route.fullPath"/>

这在您需要时很有用：

正确触发组件的生命周期挂钩
触发转换

【讨论】：