Vue Router - 滚动时更改路由中的锚点 [英] Vue Router - Change anchor in route on scroll
问题描述
我基本上试图在我的网站上拥有与此处完全相同的路由行为:https://router.vuejs.org/guide/#html.请注意,当您向下滚动时,链接会更改为 https://router.vuejs.org/guide/#javascript.向上滚动,反之亦然.重新加载页面时,您的位置将被保存.
我向路由器添加了以下滚动行为:
scrollBehavior(to, from, savedPosition) {如果(to.hash){返回 { 选择器:to.hash }} else if (savedPosition) {返回保存位置;} 别的 {返回 { x: 0, y: 0 }}
现在我可以跳转到带有链接的锚点,并且路线会发生变化.这就是我所了解的.以 Vue Router 网站为例有点讽刺,但无论如何 - 我怎样才能复制它的行为?
您可以设置一个 IntersectionObserver
并观察页面上的所有部分.当一个部分进入视图时,获取该部分的 id 并更新路由:
...<div class="section"id="javascript">...
data() {返回 {部分观察者:空}},挂载(){this.observeSections()},方法: {观察部分(){尝试 {this.sectionObserver.disconnect()} 捕捉(错误){}常量选项 = {rootMargin: '0px 0px',阈值:0}this.sectionObserver = new IntersectionObserver(this.sectionObserverHandler, options)//观察每个部分const 部分 = document.querySelectorAll('.section')section.forEach(section => {this.sectionObserver.observe(section)})},sectionObserverHandler(条目){for (const 条目) {如果(entry.isIntersecting){const sectionId = entry.target.id//在这里推送 sectionId 到路由器this.$router.push({ name: this.$route.name, hash: `#${sectionId}` })}}}}
正如评论中提到的@Sigi,您可以在中使用
,避免混淆历史.this.$router.replace()
代替this.$router.push()
>sectionObserverHandler
I am basically trying to have the exact same routing behaviour on my site as here: https://router.vuejs.org/guide/#html. Notice when you scroll down the link changes to https://router.vuejs.org/guide/#javascript. Scroll back up and it is vice versa. When reloading the page your position gets saved.
I added the following scroll behavior to my router:
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
Now I can jump to an anchor with a link and the route changes. That's about as far as I get. Kind of ironic to pick the Vue Router website as an example, but anyway - how can I replicate its behaviour?
You could set up an IntersectionObserver
and observe all sections on the page. When a section enters the view, take the section's id and update the route:
<div class="section" id="html">
...
</div>
<div class="section" id="javascript">
...
</div>
data () {
return {
sectionObserver: null
}
},
mounted () {
this.observeSections()
},
methods: {
observeSections() {
try {
this.sectionObserver.disconnect()
} catch (error) {}
const options = {
rootMargin: '0px 0px',
threshold: 0
}
this.sectionObserver = new IntersectionObserver(this.sectionObserverHandler, options)
// Observe each section
const sections = document.querySelectorAll('.section')
sections.forEach(section => {
this.sectionObserver.observe(section)
})
},
sectionObserverHandler (entries) {
for (const entry of entries) {
if (entry.isIntersecting) {
const sectionId = entry.target.id
// Push sectionId to router here
this.$router.push({ name: this.$route.name, hash: `#${sectionId}` })
}
}
}
}
As @Sigi mentioned in the comment, you can use this.$router.replace()
instead of this.$router.push()
in the sectionObserverHandler
, to avoid cluttering the history.
这篇关于Vue Router - 滚动时更改路由中的锚点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!