a标签锚点链接 + 遇到的问题

需求背景

• 页面左侧是一级、二级标题，页面右侧是一级、二级标题对应的内容
• 点击左侧标题，锚点链接，右侧内容跳转到左侧标题对应的内容区域
  

实现思路

1. 通过 a 标签 + id 的方法实现锚点链接跳转
2. 左侧使用 a 标签来实现锚点链接

   <a :href="`#${index + 1}_${item.type || '其他'}`"><a>
   

3. 右侧使用唯一 id 来定位内容区域位置

   <span :id="`${index + 1}_${item.type || '其他'}`">{{ item.type || '其他' }}span>
   

遇到的问题

• 左侧 a 标签点击后右侧内容区域跳转没有问题（除了第一个 “1.正卷” ）；
• 【问题】点击左侧红色框框住的 “1.正卷” 时（此时页面地址已经拼接 #/1_正卷），右侧内容区域不跳转到右侧红框目标区域，奇奇怪怪
  

问题解决

不是因为在第一行锚点失效，其他在第一行的锚点跳转是正常的。

使用原生js【解决】： document.querySelector('目标位置的id或者className').scrollIntoView({ behavior: "smooth" }),
【注意】 querySelector() 获取的元素 id 或 className 不能为数字，如果时数字可以使用 getElementById() 或 getElementsByClassName() 替换 querySelector()

解决代码

// 判断是第一个一级标题时，使用原生js的滚动将右侧目标内容展示
this.$nextTick(() => {
  const dom = document.getElementById(`1_${data.type || '其他'}`)
  dom && dom.scrollIntoView({ behavior: 'smooth' })
})

关于锚点链接其他问题

1. 配合
   可以实现锚点跳转？我试了不行;
2. 锚点链接跳转时当前页面地址会自动拼接 #/XXX 这对于vue 项目 hash 模式 来说，如果刷新页面，页面将变空白，因为刷新时将 #/XXX 作为一个路由去访问，但是项目中不存在该路由，如何解决？侦听刷新事件，刷新时将当前页面路由保存，然后再使用 this.$router.replace('当前页面路由') 跳到该路由。