Vue.js 中的内部链接：使用 vue-router 跳转到具有 id 的视图中的特定部分答案

【问题标题】：Internal links in Vue.js: Using the vue-router to jump to a specific section in a view with an idVue.js 中的内部链接：使用 vue-router 跳转到具有 id 的视图中的特定部分
【发布时间】：2020-11-26 00:10:15
【问题描述】：

我有一个主页视图和一个博客视图。
尝试使用 <router-link> 从主页视图跳转到博客视图中的特定部分。
该部分看起来像<section id="fundamentals" class="section">

在 html 中，我相信它会像 <a href="/blog/#fundamentals">Jump to specific blog section</a>
如何使用 vue-router 复制它？

【问题讨论】：

标签： html vue.js vue-router

【解决方案1】：

查看docs for scroll behavior。特别是关于滚动到哈希的讨论：

If you want to simulate the "scroll to anchor" behavior:

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
      // , offset: { x: 0, y: 10 }
    }
  }
}

【讨论】：

【解决方案2】：

您可以使用this 并使用最佳答案中指定的路由器的@click.native 属性。你也可以使用更简单的 vue-scrollto 插件。就这么简单

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>
 
<div id="element">
    Hi. I'm #element.
</div>

设置插件后。

【讨论】：