vue2.0模拟锚点的实例

下面我就为大家分享一篇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
 }
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue使用mixins实现压缩图片代码

vue项目国际化vue-i18n的安装使用教程

Vue2.0 事件的广播与接收(观察者模式)

以上就是vue2.0模拟锚点的实例的详细内容，更多请关注其它相关文章！