Javascript 如何在Vue中的组件中预加载B组件的图像？

假设我有两个Vue文件，A.Vue和B.Vue。在A里面有一个指向B的路由器链接，其中包含很多我从Firebase实时数据库下载的图像。每次我从A导航到B时，图像的加载速度都不如我所需的快，因此我需要一种在A.vue中预加载这些图像的方法，以便在单击链接时在B.vue中渲染它们

到目前为止，我所做的是在a.vue上的

mounted（）

钩子中使用

getUrls（）

方法来获取图像的下载url并将其存储在

localStorage

，当我已经到达B.vue时，B中的

mounted（）

钩子会触发

setImage（）

方法，该方法使用

回调

函数作为参数

我读过关于

router.beforeach（）

navigation guards方法的文章，但我真的不知道如何实现它，也不确定这是否解决了我的问题

我的代码：

A.vue 
<template>
   <div>
   </div>
</template>

<script>
  export default {
   methods:{
    getUrls: function(path, localStorage_id){
        var storage = Firebase.storage();
        var storageRef = storage.ref();
        var pathReference = storageRef.child(path);
        pathReference.getDownloadURL().then(function(url) {  
            let localStorageId = localStorage_id;
            localStorage.setItem( localStorageId, url);
        }).catch(function(error) {

        });
     }
    },
   mounted(){
    this.getUrls("path/to/img", "img_id"); // this Is just for one image 
                                              (to keep it simple) 
   },
  }
</script>

B.vue
<template>
   <div>
    <img id="img_id"> 
   </div>
</template>

<script>
  export default {
   methods:{
    setImage: function(localStorageId, imgId, setSrc){
        var imgURL = localStorage.getItem(localStorageId);
        console.log(imgURL);
        setSrc(imgId, imgURL);            
    },
    // callback function
    setSrc: function(imgId, imgURL){
        var img = document.getElementById(imgId);
        img.src = imgURL; 
    }
   },
   mounted(){
    this.setImage("localStorage_id", "img_id", this.setSrc); 
   },
  }
</script>

A.vue
导出默认值{
方法：{
getURL:函数（路径、本地存储\u id）{
var storage=Firebase.storage（）；
var storageRef=storage.ref（）；
var pathReference=storageRef.child（路径）；
pathReference.getDownloadURL（）.then（函数（url）{
设localStorageId=localStorage\u id；
setItem（localStorageId，url）；
}).catch（函数（错误）{
});
}
},
安装的（）{
this.getUrls（“path/to/img”，“img_id”）；//这只适用于一个图像
（保持简单）
},
}
B.vue

（为了简单起见，使用了ommitted

style

tags）

---

我希望可以在不必等待（太长时间）的情况下观看所有图像，但我的尝试并没有加快速度。有什么建议吗？

TLDR：如果您想快速获取图像，请将其存储在本地

解决办法很简单。因为我的图像对这个应用程序非常重要，所以我必须将它们本地存储在我的应用程序中，而不是从Firebase实时数据库下载它们。这对渲染速度有很大帮助。因此，我在应用程序中使用这些文件创建了一个目录，并将设置方法更改为：

   setImage: function(my_imgURL, imgId, setSrc){
    var imgURL = my_imgURL; 
    console.log(imgURL);
    setSrc(imgId, imgURL);          
    },
    setSrc: function(imgId, imgURL){
        var img = document.getElementById(imgId);
        img.src = imgURL; 

    }

---

我是在路由器上做的你可以在这里看到我的答案：