我正在寻找一种使用 Vue 路由器处理页面内锚点的智能方法。请考虑以下事项：
<router-link to="#app">Apply Now</router-link>
<!-- some HTML markup in between... -->
<div id="app">...</div>
文档中描述的"滚动到锚点"行为工作正常，但以下情况除外：
- 当您单击锚点时，它会将您带到
div id="app".现在从div滚动回到锚点并尝试再次单击它 - 这次您不会跳到div。实际上，锚点将保留类router-link-active，并且URL仍将包含哈希/#app; - 通过上述步骤，如果您刷新页面(URL 仍将包含哈希(并单击锚点，也不会发生任何事情。
从UX的角度来看，这是非常不幸的，因为潜在客户必须再次手动向下滚动才能到达应用程序部分。
我想知道 Vue 路由器是否涵盖了这种情况。作为参考，这是我的路由器：
export default new VueRouter({
routes,
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
}
})
我在资源中没有找到任何可以解决您的问题的内容，但是您可以使用$route.hash来使用包含您的<router-view></router-view>的组件的mounted钩子来解决刷新问题。
<script>
export default {
name: 'app',
mounted: function()
{
// From testing, without a brief timeout, it won't work.
setTimeout(() => this.scrollFix(this.$route.hash), 1);
},
methods: {
scrollFix: function(hashbang)
{
location.hash = hashbang;
}
}
}
</script>
然后要解决第二次点击的问题，您可以使用native修饰符并绑定到您的<router-link></router-link>。 这是一个相当手动的过程，但会起作用。
<router-link to="#scroll" @click.native="scrollFix('#scroll')">Scroll</router-link>
您可能还可以使用路由器的afterEach方法做一些事情，但尚未弄清楚。
如果您已经在带有哈希的路由上，则可以将其设置为滚动到目标。
(另请注意scrollBehavior()如果您已经在尝试访问的路由上，则不会调用路由器中的方法(。
export default {
methods: {
anchorHashCheck() {
if (window.location.hash === this.$route.hash) {
const el = document.getElementById(this.$route.hash.slice(1))
if (el) {
window.scrollTo(0, el.offsetTop)
}
}
},
},
mounted() {
this.anchorHashCheck()
},
}
然后添加一个@click.native来收听<router-link>中锚点上的事件，
<router-link :to="{hash: '#some-link'}" @click.native="anchorHashCheck">
Some link
</router-link>
更可重用的可能解决方案 IMO：
this.$router.push({ name: 'home' }, undefined, () => { location.href = this.$route.hash })
由于第三个参数是 abort(( 函数，它可能会产生不必要的副作用。
如果要全局使用它，请向路由器添加一个功能：
pushWithAnchor: function (routeName, toHash) {
const fromHash = Router.history.current.hash
fromHash !== toHash || !fromHash
? Router.push({ name: routeName, hash: toHash })
: Router.push({ name: routeName, hash: fromHash }, undefined, () => { window.location.href = toHash })
}
并在具有以下功能的组件中使用它：
this.$router.options.pushWithAnchor('home', '#fee-calculator-section')
在模板中，您可以执行以下操作：
<a @click="this.$router.options.pushWithAnchor('home', '#fee-calculator-section')"></a>
可悲的是，您不能使用滚动偏移量
我使用了这个解决方案：
<router-link to="/about" @click.native="scrollFix('#team')" >The team</router-link>
而这个：
methods: {
scrollFix: function(hash) {
setTimeout(() => $('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000), 1)
}
}
我知道你问了锚点，你已经有了答案。但是，以下函数应该适用于锚点和常规链接。它允许您滚动到路由匹配到的组件的第一个实例的位置。我写它是为了看看我是否可以在保留锚点样式滚动的同时绕过哈希。
scrollBehavior(to, from, savedPosition) {
if (to.matched) {
const children = to.matched[1].parent.instances.default.$children;
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (child.$options._componentTag === to.matched[1].components.default.name) {
return {
x: child.$el.offsetLeft,
y: child.$el.offsetTop
};
}
}
}
return {
x: 0,
y: 0
};
}
我使用parent.instances的原因是因为to.matched[1].instances值为空。这不是最优雅的解决方案，尽管它可能会帮助其他人。
注意：这仅在您要滚动组件的第一个实例时才有效。