vue2.0模拟锚点的实例

 更新时间:2018年03月14日 10:22:20   作者:亲爱的混蛋  
下面小编就为大家分享一篇vue2.0模拟锚点的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能。

解决办法:

<a href="javascript:void(0)" rel="external nofollow" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</a>
methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop
 }
}

17. 9. 20 更新: 以上在FireFox有BUG,修复如下:

methods: {
 goAnchor(selector) {
  var anchor = this.$el.querySelector(selector)
  document.body.scrollTop = anchor.offsetTop; // chrome
  document.documentElement.scrollTop = anchor.offsetTop; // firefox
 }
}

以上这篇vue2.0模拟锚点的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue输入框状态切换&自动获取输入框焦点的实现方法

    Vue输入框状态切换&自动获取输入框焦点的实现方法

    这篇文章主要介绍了Vue输入框状态切换&自动获取输入框焦点的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • vue v-viewer组件使用示例详解(v-viewer轮播图)

    vue v-viewer组件使用示例详解(v-viewer轮播图)

    这篇文章主要介绍了vue v-viewer组件使用示例详解(v-viewer轮播图),本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue读取本地静态文件json的2种方法以及优缺点

    Vue读取本地静态文件json的2种方法以及优缺点

    这篇文章主要介绍了Vue读取本地静态文件json的2种方法以及优缺点说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 详解VueRouter 路由

    详解VueRouter 路由

    本文详细介绍了VueRouter 路由的概念、规则、基础等相关内容,文中运用大量的图片进行讲解,感兴趣的小伙伴可以看一看这篇文章
    2021-08-08
  • 详解vuejs几种不同组件(页面)间传值的方式

    详解vuejs几种不同组件(页面)间传值的方式

    本篇文章主要介绍了详解vuejs几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • 解决vue中axios设置超时(超过5分钟)没反应的问题

    解决vue中axios设置超时(超过5分钟)没反应的问题

    这篇文章主要介绍了解决vue中axios设置超时(超过5分钟)没反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vite vue3 路由配置@找不到文件的问题及解决

    vite vue3 路由配置@找不到文件的问题及解决

    在Vite项目中配置路由时,可能会遇到文件路径错误导致的加载失败问题,常见的解决办法包括安装路径处理插件、正确设置vite.config.js中的路径别名以及重启项目,通过正确配置,可以确保路由正确加载对应的界面文件,避免路径错误导致的问题
    2024-10-10
  • vue+webpack模拟后台数据的示例代码

    vue+webpack模拟后台数据的示例代码

    这篇文章主要介绍了vue+webpack模拟后台数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    这篇文章主要介绍了vue项目打包,解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细,需要的朋友跟随小编一起看看吧
    2023-10-10
  • el-upload 文件上传组件的使用讲解

    el-upload 文件上传组件的使用讲解

    Upload 上传文件这个功能是我们在企业实际开发当中使用频率是非常高的这样一个文件上传的功能,element ui组件组也给我们提供了上传的组件,本文给大家介绍el-upload 文件上传组件的使用,感兴趣的朋友跟随小编一起看看吧
    2024-02-02

最新评论