1.先记录一下非跨页面的实现方法:
官方文档有写,这样在一个组件里改变hash,比如#anchor-1,
就能够跳到id为anchor-1的位置
router.js中添加
mode: 'history',
srcollBehavior(to,from,savedPosition){
if(to.hash){
return {
selector:to.hash
}
}}
2.但是如果我们要做页面跳转时的锚点,
比如 a组件点击 pageb#anchor-1跳转到b组件,b组件需要根据hash跳转到指定位置,就不能用上面的方法了。
可以如下实现:
在b组件内添加一个方法:
goAnchor(selector) {
let anchor = this.$el.querySelector(selector)
document.documentElement.scrollTop = anchor.offsetTop
},
#这里是根据root 节点来scroll,可以自己根据需要调整scroll对象
在b组件的mounted中添加
this.$nextTick(()=>[
this.goAnchor(window.location.hash)
])
这样跳转到静态页面是没有问题了
但是如果
b组建执行锚点的地方是通过ajax获取数据,v-for渲染的,这样在goAnchor方法中是获取不到anchor节点的,需要等待渲染完成。我们可以通过watch来观察数据是否加载完毕
data() {
return {
items:[] #通过ajax获取
}
},
watch:{
items:function () {
this.$nextTick(()=>[
this.goAnchor(window.location.hash)
])
}
},
这样就能解决跨页面的锚点问题
网友评论