关于vue 和react 中的hash与锚点冲突问题

  // 可以利用事件委托进行处理hash和锚点的冲突问题。
  //
  handleAnchorClick(e){
    if (e.target && e.target.tagName.toLowerCase() === ‘a‘) {
      // 确定点击元素是不是a元素;
      // Determine whether the click element is a element;
      const href = e.target.href;
      // 确定你的锚点href
      const regx = /#锚点名字\/.+/g;
       // 指定符合你锚点的正则表达式
      //  Specify regular expressions that match your anchor
      const result = regx.exec(href);
      // 检测是否可以匹配到你的锚点
      // Check if it matches your anchor
      if (result && result.length === 1 ) {
        const name = result[0].replace(‘#‘,‘‘);
        // 替换锚点链接中#
        // Replacement anchor link#
        document.querySelector(`a[name="${decodeURI(name)}"]`).scrollIntoView();
        // 拿到你的锚点元素并移动到锚点的位置
        // Get your anchor element and move to the anchor position
        e.preventDefault();
        // 阻止点击带来替换location.href的问题
        // Blocking clicks raises the issue of replacing location. href
      }
    }
  }

原文地址:https://www.cnblogs.com/l8l8/p/11276068.html

时间: 2024-07-31 13:18:42

关于vue 和react 中的hash与锚点冲突问题的相关文章

去除富文本中的html标签及vue、react、微信小程序中的过滤器

在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及?空格 let richText = ' <p style="font-size: 25px;color: white">&nbsp; &nbsp; &nbsp; &nbsp;sdaflsjf的丰富及饿哦塞尔</p><s

Vue vs React: Javascript 框架

正如我们之前提到的,WordPress 的核心团队正争论着为应该将哪款(前端框架)加入现在的架构之中.目前看来,暂时脱颖而出的是React与Vue.js,社区中的很多成员正权衡着这两款框架的利弊. 那到底哪款框架会胜出,哪款框架又会沦为昔日的prototype.js.呢?让我们一起看看吧. 我已经写出了两个几乎一样的Web应用,一个是基于Vue,另一个则基于React,可以方便你在看这篇文章的时候查找相关代码. React sample app(https://github.com/ptaske

Vue与REACT两个框架的区别和优势对比

VUE和REACT两个JavaScript框架都是当下比较受欢迎的,他们两者之间的区别有那些,各自的优缺点是什么,本文将为你呈现. 简单介绍 除非你最近一直不关注前端的发展,不然你肯定听说过由Facebook创建的JavaScript UI框架--REACT.它支撑包括Instagram在内的大多数Facebook网站.REACT与当时流行的jQuery,backbone.js和Angular 等框架不同,它的诞生改变了JavaScript的世界.其中最大的变化是REACT推广了Virtual

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

前端三大框架中Vue与React区别

首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Composable)的视图组件 3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库 性能方面 #React在性能方面使用virtual DOM实现没有vue的virtual DOM实现好,相比较来说vue的virtual DOM的实现更为轻量些 #在React应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树 如果避免不必要的子

vue、react、微信小程序中的过滤器

一.去除html标签及空格  1 let richText = ' <p style="font-size: 25px;color: white">&nbsp; &nbsp; &nbsp; &nbsp;sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; 2 3 /* 去除富文本中的html标签 */ 4 /* *.+限定符都是贪婪的,因为它们会尽可能多的匹配文字,只有在它们

Vue单页式应用(Hash模式下)实现微信分享

前端微信分享的基本步骤: 一.绑定域名: 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".这个不多说,微信开发的都应该清楚. 二.引入js文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js.请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixi

vue与react的区别

相同点:都是基于组件化的轻量级框架,都专注于构建用户界面的视图层 vue,react都会构建一个虚拟的DOM并同步带真是的DOM中 vue数据绑定表达式使用过的双大括号语法,而指令是用于向模板添加功能,react不使用模板,借助jsx在JavaScript中创建DOM react里的状态(state)是不可变的,不能直接改变它,要用setState API方法,vue的数据是可变的,遍历其中所有的属性转换为getter,setter方法 如果你想要一个同时使用于web端和app端的框架.请选择r

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非