Vue.js 锚定到同一组件内的 div

Question

我正在开发一个 Vue.js 应用程序，但无法将锚链接到组件中的某个 div。

我有以下锚：

 <a href="#porto" class="porto-button">Porto, Portugal</a>

和以下div：

 <div id="porto" class="fl-porto">

我在哈希模式下使用 vue-router。

问题是，每当我单击“porto-button”时，它都会将我重定向到“主页”页面（’/‘）

我正在使用 Vue.js 1.X，我尝试使用历史模式（没有 hashbang 的 URL），但它在刷新页面时给了我一个 cannot GET '/page' 错误。

难道我做错了什么？我能做些什么呢？

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

Answer 1

因为您在哈希模式下使用路由器，所以您将无法轻松滚动，因为滚动到 /#something 实际上会将您重定向到“某事”页面。

您将不得不自己模拟滚动行为，尝试执行以下操作：

 //P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.

//Your view:
<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">

 //Your code:
methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;

    window.scrollTo(0, top);
  }
}

这个怎么运作：

1. 通过 ref 属性将引用设置为您要滚动到的元素；
2. 编写一个函数，以编程方式将 window.scrollY 设置为被引用元素的 top 。
3. 工作完成:)

更新1：

jsfiddle https://jsfiddle.net/5k4ptmqg/4/

更新 2：

似乎在 Vue 1 ref="name" 看起来像 el:name (docs) ，这是一个更新的示例：

https://jsfiddle.net/5y3pkoyz/2/

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

Answer 2

另一种方法是使用“scrollIntoView()”

所以，euvl 的代码仍然存在，只是你会稍微改变方法：

    new Vue({
      el: '#app',
      methods: {
        goto(refName) {
            var element = this.$els[refName];
          element.scrollIntoView();
        }
      }
    })

如果您想变得花哨并使滚动平滑，您甚至可以添加以下内容：

 element.scrollIntoView({ behavior: 'smooth' });

请注意，对于旧版浏览器，这将需要一个 polyfill。

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