Nuxt 组件中的锚点在包含锚点的同一页面上不起作用答案

【问题标题】：Anchor in Nuxt component not working on same page the anchor is included onNuxt 组件中的锚点在包含锚点的同一页面上不起作用
【发布时间】：2020-03-31 14:14:40
【问题描述】：

在我的页脚组件中，我有这个链接到关于页面上的所有者简介

 <nuxt-link :to="{path: '/about', hash: 'alex'}">Alex</nuxt-link>

在 about/index.vue 文件中我有锚

 <hr class="my-5" id="alex" />
    <h2 style>
      Alex
      <br />
      <span style="font-size: 16px; font-weight: bold;">Co-Founder and Partner</span>
    </h2>

当您单击页脚中的链接时，这在所有页面上都有效。如果您在关于页面上并单击页脚链接，则它不起作用。

我可以做些什么来使它也能在关于页面上工作？

【问题讨论】：

标签： vue.js anchor nuxt.js

【解决方案1】：

更新 Nuxt 链接如下

<nuxt-link :to="{path: '/about', hash: '#alex'}">Alex</nuxt-link>

++ 更新

需要在nuxt.config.js中添加scroll behavior如下

  router: {
    scrollBehavior: async function(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = async (hash, x = 0) => {
        return (
          document.querySelector(hash) ||
          new Promise(resolve => {
            if (x > 50) {
              return resolve(document.querySelector("#app"));
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      if (to.hash) {
        let el = await findEl(to.hash);
        if ("scrollBehavior" in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  },

Codesandbox Link

您也可以使用 vue-scrollto 包，如果您使用带有 Nuxtjs 的 Vuetify，则可以使用 $vuetify.goTo。

【讨论】：

@DavidMeinke 更新了我的答案，请尝试一次，如果您有任何问题，请告诉我。还添加了代码沙箱

【解决方案2】：

只是想补充一下，如果有人卡住了，可以在你的nuxt项目中添加一个名为router.scrollBehavior.js的文件：

https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#scrollbehavior

不幸的是，它在渲染之前触发存在问题 - 如果您正确导入，您可以使用 nuxt/vue tick - 但这似乎仍然有效（对于锚点和保存的位置）：

export default async function (to, from, savedPosition) {


if (savedPosition) {
    console.log("SAVED POSITION");
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          selector: savedPosition
        });
      }, 600);
    });
    // not working consistently due to render
    //return savedPosition;
}
else if (to.hash) {
    console.log("HASH");
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        selector: to.hash
      });
    }, 600);
  });
}
else {
    console.log("NORMAL");
    return { x: 0, y: 0 };
}}

【讨论】：