Проблема с переходом по nuxt-ссылкам на страницы с хешами / якорями - PullRequest
Новая
       144

Проблема с переходом по nuxt-ссылкам на страницы с хешами / якорями

1 голос
/ 09 апреля 2019

Я использую nuxt-ссылки в навигации по моему сайту, большинство из них указывают на хэшированные элементы / якоря на домашней странице, такие как: 

<nuxt-link
  v-else
  class="text-link"
  :to="localePath('index') + #hash"
>

, и это делает свою работу, если в настоящее время находится на домашней странице, нокогда я перехожу на другой сайт, например./ about, и я нажимаю на nuxt-ссылку на панели навигации (поэтому я хочу перейти от / about к / # hash или / any-other-site # hash) Я получил сообщение об ошибке nuxt, чтобы проверить консоль, на которой написано "Cannot read"свойство offsetTop из null ".

Моя конфигурация маршрутизатора в nuxt.config (без нее я бы даже не смог прокрутить до привязанного элемента, находящегося на том же сайте, что и элемент!): 

  router: {
    scrollBehavior(to) {
      if (to.hash) {
        return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' });
      }
      return window.scrollTo({ top: 0, behavior: 'smooth' });
      }
  },

Inатрибут: я пробовал 'hash' '#hash', ничего не работает.Может ли кто-нибудь помочь мне с этим?Как перейти на другую страницу + #anchor (чтобы перейти к этой привязке?)

1 Ответ

0 голосов
/ 26 июня 2019

Любой, у кого возникла эта проблема, является простым решением, если вы используете Nuxt-Link

Вместо использования <nuxt-link to="#contact" >Contact</nuxt-link>, который не работает. Используйте <nuxt-link :to="{ path: '/',hash:'#contact'}">Contact</nuxt-link>

path - это страница, на которую вы перейдете

hash - это позиция, которую вы прокрутите до

Надеюсь, это кому-нибудь поможет.

...