problem description: use vue to develop a single page reference program and do a project similar to moments. The list page has more pictures, from the list page to the details page (via routing), and the picture is reloaded again, and the overall picture is loaded slowly. Therefore, if you want to use the cache and get the picture directly after entering the details page, how to achieve it?
method used: image lazy loading and image compression technology have been used
IMG returns, set enable browser caching in HTTP Header and set caching time.
if you don't understand, read this article to thoroughly understand the mechanism and principle of HTTP caching "
.strong browser cache is fine
pseudo code
<template>
<ul>
<!--itemidpic-->
<li v-for="(item,i) in " click="(item)">
<!---->
<img :src="item.pic" />
</li>
</ul>
</template>
<script>
methods:{
(item){
// params vuex sessionStorage
this.$router.push("/",query:{id:item.id},params:{pic:item.pic});
}
}
</script>