路由跳转中的hash值和锚点冲突
Posted mjmajong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了路由跳转中的hash值和锚点冲突相关的知识，希望对你有一定的参考价值。
dealLink() { //处理a标签情况，1、跳转到别的站点 2、当前页面锚点 3、不是站点又不是锚点，处理成文本形式
let element = document.querySelectorAll(‘a‘)
element.forEach((item, index) => {
const href = item.getAttribute(‘href‘), //获取标签的href属性
isInclude = href.includes(‘http‘),
isHash = item.hash,
noClick = !isInclude && !isHash //特殊情况，不是站点又不是锚点的处理情况
if (noClick) {
item.style.color = ‘rgba(0, 0, 0, 0.65)‘
}
element[index].addEventListener(‘click‘, e => {
this.stopDefault(e)
if (noClick) {
return false
}
if (isInclude) {
window.open(href, ‘_blank‘)
} else {
this.anchorScroll(href)
}
})
})
},
stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault()
} else {
window.event.returnValue = false
}
},
anchorScroll(anchorName) {
document.querySelector(anchorName).scrollIntoView(true) //当hash值和锚点冲突之后，手动拿到锚点的位置进行滑动
},
以上是关于路由跳转中的hash值和锚点冲突的主要内容，如果未能解决你的问题，请参考以下文章