一、
vant的图片预览
运用详解：
在组件里引用

import {  ImagePreview } from 'vant';

<div class="img_box" v-for='(item2,index) of item.images' :key='index'>
   <img :src="item2" alt="" @click="getImg(item.images,index)">
</div>
//图片预览，通过传参的方式把图片数组放入ImagePreview配置对象里
methods:{
	getImg(images,index){
      ImagePreview({
          images:images,
          showIndex:true,
          loop:false,
          startPosition:index
      })
  },
 
 

二、
vant 预览图片的组件没有详细告诉我们碰到安卓键返回的时候该怎么处理，正常情况：预览图缩小，还在该页面；实际情况：预览图缩小，页面回退
处理：
1.

getImg(images,index){ 
     ImagePreview({ 
         images:images,
         showIndex:true,
         loop:false,
         startPosition:index,
         closeOnPopstate:true//首先加上这个属性：是否在页面回退时自动关闭，设置为true
     })
 }

2.在beforeRouteLeave路由离开之前，判断预览是否是隐藏的，是让他执行路由跳转，否让他不跳转（不过这种方法不适用于首页）

beforeRouteLeave (to, from, next) { 
        if(($('.van-image-preview').css('display')=='none' && $('.van-image-preview__overlay').css('display')=='none') || ($('.van-image-preview').css('display')==undefined && $('.van-image-preview__overlay').css('display')==undefined)){ 
            next(true);
            this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        }else{ 
            next(false);
        }
    },

首页处理，相当于监听安卓返回键

methods:{ 
	toBack(){ 
    	//做返回判断 
    }
},
mounted() { 
    if (window.history && window.history.pushState) { 

          history.pushState(null, null, document.URL);

          window.addEventListener('popstate', this.toBack, false);//false阻止默认事件

        }
  },
  destroyed:function(){ 
      window.removeEventListener('popstate', this.toBack, false);//false阻止默认事件
  }