Anchor锚点定位 url 拼接href

241 阅读1分钟

废话少说直接进入主题

当点击Link的时候

确保href绑定正确的情况下,点击的时候出现了定位错误并且url成为变动成为了href的值

http://localhost:9998/#/href

解决方案

  1. 首先在onClick时绑定一个function
  2. 然后在方法中施法
  3. 最重要的一步 ctrl+s 好了问题解决了
    const anchorClick = (e) => {
        e.stopPropagation()
        e.preventDefault()
    }
    
    
    <Anchor 
        onClick={anchorClick}
    />

现在分析一下问题所在

首先介绍一下主角Anchor实现跳转的原理是根据a标签实现锚点功能滴,然而a标签的定义为超链接就是用于从一张页面链接到另一张页面还有一种解释简称为(锚)用于从页面当前位置跳转至指定锚点,它最重要的属性是 href 属性,指示链接的目标。

补充一下这两个方法

e.stopPropagation() 是一个事件方法,用于阻止事件冒泡。事件冒泡是指事件在 DOM 树中从目标元素向上层级传播的过程,也就是事件冒泡阶段。

e.preventDefault() 也是一个事件方法,用于阻止默认的事件行为。默认的事件行为就是指浏览器对某些事件的默认处理方式。

在咱们使用Anchor 点击的时候他的底层使用的就是<a>,然后在 <a> 标签上点击时,浏览器会默认执行链接跳转到 href 属性指定的网址然后就会出现咱们上面的问题

完结