vue.js - Nuxt 组件中的 anchor 不能在同一页面上工作 anchor 包含在

Question

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

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

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

 <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

您可以使用 vue-scrollto还打包，如果您将 Vuetify 与 Nuxtjs 一起使用，则 $vuetify.goTo 可用。