可以透過 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 來達到複用,這裡就不贅述了。