30.使用锚点链接导致url发生改变,一旦刷新页面就会导致找不到页面的情况?

 

步骤一：将原来锚链接中href="#id1"去掉，增加点击事件@click="toTopic('#id'+index)"

<a v-for="(tag, index) in 30" :key="index" @click="toTopic('#t'+index)">
    <el-tag type="info" class="tagItem">{{ index + 1 }}</el-tag>
</a>

 

步骤二：利用scrollIntoView方法使对应的id进入可视区即可

toTopic(idName){
      document.querySelector(idName).scrollIntoView(true);
}