vue 实现a标签定位_vue2.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 模式 也沒關係，可以用其他方式：

{{index}}

{{index}}

methods: {

goAnchor(selector) {

var anchor = this.$el.querySelector(selector)

document.body.scrollTop = anchor.offsetTop

}

}

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

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