如何在 Vue 中正确设置锚链接答案

【问题标题】：How do I properly set up anchor links in Vue如何在 Vue 中正确设置锚链接
【发布时间】：2022-07-05 04:30:34
【问题描述】：

总的来说，我对 Vue.js 和前端开发还很陌生，所以这个问题对于一些老手来说可能看起来很愚蠢，但我就是不知道如何设置它。

我的第一个方法是硬编码 HTML 并使用 jQuery 滚动到每个锚点：

<div class="col-md-4" id="pageContent">
  <div class="sub-nav">On this page</div>
  <ul>
    <li>
      <div class="anchorLink" data-anchor="Link-1">Link 1</div>
    </li>
    <li>
      <div class="anchorLink" data-anchor="Link-2">Link 2</div>
    </li>
  </ul>
</div>

$('.anchorLink').click(function () {
    $('html, body').animate({
        scrollTop: $('#' + $(this).data('anchor')).offset().top
    }, 200);
    return false;
})

本来没问题，但不知何故，这仅在我重新加载页面后才有效，并且由于这种方法不是真正动态的，我决定不浪费更多时间并为此元素构建一个 Vue 组件，如下所示：

<template>
  <div class="col-md-4" id="pageContent">
    <div class="sub-nav">On this page</div>
    <ul>
      <li v-for="anchor in anchors" :key="anchor._id">
        <div class="anchorLink" :data-anchor="anchor.link">
          {{ anchor.name }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    anchors: {
      name: String,
      link: String,
    },
  },
};
</script>

并通过这样的日期：

<template>
  <h2 id="Test-1">Test 1</h2>
  ...
  <h2 id="Test-2">Test 2</h2>
  ...
  <page-content :anchors="anchors" />
</template>

<script>
import PageContent from "@/components/PageContent.vue";
export default {
  components: {
    PageContent,
  },

  data() {
    return {
      anchors: [
        {
          name: "Test 1",
          link: "Test-1",
        },
        {
          name: "Test 2",
          link: "Test-2",
        },
      ],
    };
  },
};
</script>

这暂时可行，但现在我几乎遇到了同样的问题，我每次都必须重新加载页面才能使 jQuery 脚本正常工作。我现在真的很迷茫，我现在真的不知道如何进步，因为我不知道这样做的“最佳”方式是什么。谁能帮我解决这个问题？

【问题讨论】：

每次都必须重新加载页面才能使 jQuery 脚本工作是什么意思？ jquery代码放在哪里？
仅供参考，您应该将元素上的 $('.anchorLink').click(function () { 替换为 @click=""
我实际上已经根据您对@click 处理程序的提示设法解决了这个问题，非常感谢！ :)

标签： vue.js

【解决方案1】：

<a class="btn-primary" @click="scrollToAnchorPoint('testBlock')">
    Scroll Test
</a>
<div ref="testBlock">
    In page anchor point
</div>
<script>
export default{
    methods: {
        scrollToAnchorPoint(refName) {
            const el = this.$refs[refName]
            el.scrollIntoView({ behavior: 'smooth'})
        }
    }
}
</script>

forsmile.jp

【讨论】：