Nuxt组件中的锚无法在包含锚的同一页面上使用

Question

在我的页脚组件中，我可以将此链接链接到关于页面上的所有者简介

 <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>

在所有页面上，当您单击页脚中的链接时，都可以使用。如果您在“关于”页面上，然后单击页脚链接，它将不起作用。

我该怎么做才能使其在“关于”页面上正常工作？

Answer 1

如下更新Nuxt链接

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

++更新

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

  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