首页 > 其他分享 >vue项目中锚点定位bug无效和替代方式

vue项目中锚点定位bug无效和替代方式

时间:2023-07-04 21:12:36浏览次数:49  
标签:定位 vue 项目 section 锚点 跳转 bug 中锚

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位:

scrollToSection(id) {
  let section = document.getElementById(id)
  if (section) {
    section.scrollIntoView()
  }
}


html标签中绑定click事件就可以了

.....

标签:定位,vue,项目,section,锚点,跳转,bug,中锚
From: https://www.cnblogs.com/wangyb56/p/17527004.html

相关文章

  • 解决vue 不是内部或外部命令
    1.输入命令找到npm的配置路径npmconfiglist2.查看此路径下有没有vue.cmd3.如果有vue.cmd,将当前路径复制添加到path环境变量步骤:桌面右击“我的电脑”-属性-高级系统设置-环境变量环境变量两种添加方式:①直接新建-规范取一个变量名-将vue.cmd所在路径复制到变量值......
  • Vue内置缓存组件keep-alive
    <el-tab-panelabel="周边配套":disabled=!gardenIdname="five"><keep-alive><Surrour:gardenId="gardenId"v-if="activeName==='five'"/></keep-alive>......
  • java、vue基于hutool的aes指定秘钥加密(前后端aes加解密)
     后端代码//加密data对称AESKeybyte[]key=getBytes("._^BV67nW6ck8fwg",16);//秘钥长度最好是16位SymmetricCryptoaes=newSymmetricCrypto(SymmetricAlgorithm.AES,key);Stringjsondata=aes.encryptHex("中国test");System.out.println(jsondata);//......
  • vue 基于 CountUp.js,可用于创建显示数字数据的动画。
    地址:https://github.com/xlsdg/vue-countup-v2Installation$npminstall--savecountup.jsvue-countup-v2Usage<template><divclass="iCountUp"><ICountUp:delay="delay":endVal="endVal"......
  • vue-cropper cdn vue3 打包后提示找不到
    vue-croppercdnvue3打包后bug vue3项目tscdn引入  vue-cropper官网推荐引入方式   dev环境报错运行不了后面发现打包后找不到  VueCropper,原来是名称问题, 修改如下:main.ts直接引入 再添加脚本到html文件window.VueCropper=window['vue-cropper'......
  • 软件测试 - bug的一些理解
    一、定义不符合需求文档说明二、确认是否是不是bug的依据需求文档、行业标准、项目文档、经验【bug敏感度】三、发现bug以后应该做什么 1、确认/复现bug-确认是偶现还是必现【出现的概率】2、一个bug最少复现3-10次,获取响应数据-截图......
  • vue3+tiff.js展示tif文件
    vue3+tiff.js展示tif文件场景:tif格式的文件需要在页面上预览(预览的tif文件较小)组件:tiff.jsnpminstalltiff.js组件引入:import'tiff.js';注意:网络上的信息引入使用importTifffrom'tiff.js'  但是实际测试这样会报错: 看源码发现只需要直接import即可获......
  • Vue-CoreVideoPlayer使用
    介绍Vue-CoreVideoPlayer一款基于vue.js的轻量级的视频播放器插件。采用AdobdXD进行UI设计,支持移动端适配,不仅功能强大,颜值也是超一流!Vue-CoreVideoPlayer的说明文档和sample都很完善,上手十分容易。该组件也保持了和原生HTMLVideo属性配置的对接,可定制性很高。播放器......
  • Vue 数组中出现__ob__: Observer无法取值[已解决]
    Vue数组中出现__ob__:Observer无法取值[已解决]代码如下解决办法加一个setTimeoutcreated(){setTimeout(()=>{//这里就写你要执行的语句即可,先让数据库的数据加载进去数组中你在从数组中取值就好了},800)}改完之后就可以了......
  • Emgucv以及debugVisualizer下载
    1.Emgucv官网https://www.emgu.com/ Github--https://github.com/emgucv/ 在release包中找到对应系统的版本例如:libemgucv-windesktop-4.5.5.4823.exe下载双击运行会提示是否为Vsxxxx安装debugVisualizer选择Yes按钮进行安装......