如何在Vue路由跳转时自动加载图片？

在 Vue 中，为了在路由跳转时自动加载图片，你可以结合 Vue Router 的生命周期钩子 `beforeRouteUpdate` 和 `mounted` 来实现。这里是一个简单的示例：

// 在路由配置里，为需要加载图片的组件添加 beforeRouteUpdate 钩子
{
  path: '/detail/:id',
  component: DetailComponent,
  beforeRouteUpdate(to, from, next) {
    // 当路由更新但是URL不变时，图片可能已存在缓存，所以只在首次加载时加载
    if (!this.$router.app.$route.meta.isLoaded && !from.meta.isLoaded) {
      this.$options.methods.loadImage(); // 调用自定义的方法去加载图片
      from.meta.isLoaded = true; // 标记已经加载过
    }
    next();
  }
}

// 在对应的组件中，创建一个 loadImage 方法，使用 Vue 的计算属性来动态绑定图片 URL
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    loadImage() {
      this.imageUrl = `https://your-api.com/image?id=${this.$route.params.id}`; // 从数据库获取图片 URL
      this.$nextTick(() => { // 确保图片已经在 DOM 中再加载
        this.$refs.myImage.src = this.imageUrl;
      });
    },
  },
  computed: {
    myImageRef() {
      return this.$refs.myImage || null; // 检查是否有实际的图片元素
    },
  },
  mounted() {
    this.loadImage(); // 初始化时加载一次图片
  },
};

<!-- HTML模板 -->
<img ref="myImage" :src="imageUrl" v-if="myImageRef"> <!-- 注意v-if来确保图片标签只渲染一次 -->

在这个例子中，当路由切换但地址保持不变时，`loadImage` 方法仅会在首次加载时运行。然后它设置了图片的 URL 并等待 DOM 渲染完成后再真正加载图片。