vue.js - vue2.0中怎么做锚点定位

问题描述

问 题

因为要实现这么一个锚点定位的效果，我就用了a标签的href属性和id属性来做

不过并不能达到想要的效果，跳转到其他页面去了，我弄了半天，觉得可能是和vue-router有关，看了下2.0的文档，看到里面有模拟滚动到锚点行为，但是不大懂那个具体怎么实现，麻烦有做过类似的朋友给解答下，或者有没有例子给参考下

解决方案

可以透過 vue-router 裡面的 scrollBehavior 實現

前提是你是使用 History 模式

html 部分就是按照你貼出來的圖

// 例子，自行對應到你項目的代碼
const router = new VueRouter({
  routes,
  mode: 'history',
  scrollBehavior (to, from, savedPosition) {
      // 如果你的連結是帶 # 這種
      // to.hash 就會有值(值就是連結)
      // 例如 #3
      if (to.hash) {
        return {
          // 這個是透過 to.hash 的值來找到對應的元素
          // 照你的 html 來看是不用多加處理這樣就可以了
          // 例如你按下 #3 的連結，就會變成 querySelector('#3')，自然會找到 id = 3 的元素
          selector: to.hash
        }
      }
    }
})

栗子

如果沒辦法使用 History 模式 也沒關係，可以用其他方式：

<div>
    <div><a href="javascript:void(0)" @click="goAnchor('#anchor-'+index)" v-for="index in 20"> {{index}} </a></div>
    <div :id="'anchor-'+index" class="item" v-for="index in 20">{{index}}</div>
</div>

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

其實 vue-router 內部處理跳轉描點的方式是差不多的，只是這裡我們自己來實現。

可以包裝成 mixin 或 directive 來達到複用，這裡就不贅述了。

栗子

这篇关于vue.js - vue2.0中怎么做锚点定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！