Vue项目中使用锚点链接导致url发生改变

        本次我们的项目是一个在线考试系统，我主要负责学生端的前台部分，最重要的那当然就是答题页面，我写的样式会涉及到点击侧边框的对应题号就会滚动到对应的题的位置，第一个想到的写法那就是锚点链接，但是当我使用锚点链接后，点击题号，会导致url发生改变，这样的话，一旦刷新页面就会导致找不到页面的情况：

 刷新页面后页面将找不到：

 解决办法：

        给侧边框的题号标签绑定一个点击事件（我这里是toTopic）：

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

         给对应的题添加id：

<div class="topicItem"  id="t4">   
    <p>5.中华四大名著有西游记吗：</p>
    <div class="shortAnswerItem">
        <el-radio-group v-model="judge" @change="judgeFun">
            <el-radio :label="false">错误</el-radio>
             <el-radio :label="true">正确</el-radio>
        </el-radio-group>
     </div>
</div>

        toTopic：

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

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