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

Posted 2023-02-22

【中文标题】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 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 复制它？

【参考方案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>

设置插件后。