vue中使用element Image 图片 跳转无法滚动问题

一、简单介绍

今天在写项目的时候，发现在点击完图片跳转后，页面无法滚动。但是同样的跳转方式放在文字上面又可以。然后也在网上查了一些资料，但还是没有问题的正确答案，所以想在这里记录一下问题，以便日后探究。

二、示例代码

<template>
  <div>
    <router-link
    :to="{ path: '/detail/75' }">
      <el-image
        class="pic"
        :src="url"
        :fit="fit">
      </el-image>
    </router-link>
    <router-link
    :to="{ path: '/detail/74'}">
      <div class="name">hello</div>
     </router-link>
  </div>
</template>

这个是我从项目中删减出来的代码，用element中image实现跳转，会发现跳转出来的页面无法滚动。但是用文字跳转或者是原本的image跳转则没有问题。

<template>
  <div>
    <router-link
    :to="{ path: '/detail/75'}">
    <img :src="url"  class="pic" alt="">
    </router-link>
  </div>
</template>

看到网上的一个帖子上有写到，说是问题在于最外层的父容器main，它的position被设为了relative，去掉这行，也就是position变为默认的static，上述问题就没有了。但是我自己试了一下，发现问题还是没解决。只能把element的中的el-image换成，image标签跳转才正常。因为自己也没搞懂，在网上也没找到其他合适的讲解，所以就先把问题记录一下，等日后在回来看看。

 

参考文章：【Vue-router踩坑】点击图片修改路由跳转到的新页面无法上下滚动问题