如何使用 Vue Router 处理锚点（书签）？

Question

我正在寻找一种使用 Vue Router 处理页内锚点的聪明方法。考虑以下：

 <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 仍将包含哈希）并单击锚点，也不会发生任何事情。

从用户体验的角度来看，这是非常不幸的，因为潜在客户必须再次手动向下滚动才能到达应用程序部分。

我想知道 Vue Router 是否涵盖了这种情况。作为参考，这是我的路由器：

 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 }
        }
    }
})

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我没有在资源中找到任何东西来解决你的问题，但你可以在你的 $route.hash 组件中使用 mounted 挂钩 <router-view></router-view> 刷新问题。

 <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 方法做一些事情，但还没有弄清楚。

原文由 Steven B. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您已经在带有散列的路线上，则可以将其设置为滚动到目标。

（另请注意 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>

原文由 wadclapp 发布，翻译遵循 CC BY-SA 4.0 许可协议