Якорь в компоненте Nuxt не работает на той же странице, на которой якорь включен - PullRequest
Новая
       14

Якорь в компоненте Nuxt не работает на той же странице, на которой якорь включен

0 голосов
/ 31 марта 2020

В моем компоненте нижнего колонтитула есть ссылка на биографию владельцев на странице about 

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

На всех страницах это работает, когда вы нажимаете на ссылку в нижнем колонтитуле. Это не работает, если вы находитесь на странице about и нажимаете ссылку в нижнем колонтитуле.

Что я могу сделать, чтобы это также работало на странице about?

1 Ответ

0 голосов
/ 01 апреля 2020

Обновить Nuxt Link, как показано ниже 

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

++ Обновлено

Необходимо добавить Режим прокрутки в 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 с Nuxt js, тогда доступно $vuetify.goTo .

...