Как прокрутить заголовок, который добавляется к URL после `#`? - PullRequest
Новая
       18

Как прокрутить заголовок, который добавляется к URL после `#`?

0 голосов
/ 31 января 2020

Я использую Nuxt js (Vue), и у меня есть боковая панель с заголовками, которая прокручивает мой основной контент, содержащий эти заголовки. Я использую Scrollspy от Boostrap Vue (https://bootstrap-vue.js.org/docs/directives/scrollspy/#example -using-list-group ). При каждом нажатии на один из заголовков URL-адрес обновляется с названием заголовка (это работает нормально). Я преобразую все заголовки в

  1. Нижний регистр
  2. Удалите все специальные символы
  3. Преобразование всех пробелов в дефисы

, а затем добавление их к URL-адресу после #

Пример : Теперь, когда кто-то вводит https://www.mydomainname.com/myarticlelisting/myarticlename#heading-3, я хочу, чтобы он прокрутился до заголовка 3.

Что работает : URL обновляется по щелчку заголовков боковой панели и прокручивается до заголовка.

Что не работает : Когда URL вводится с именем заголовка после #, он не прокручивается до соответствующего заголовка.

Это то, что у меня есть:

Моя боковая панель: 

          <div v-b-scrollspy>
            <div class="sidebar_headings">
              <b-list-group
                v-for="(item, indexheading) in article.mainContent[
                  'en'
                ].filter(item => item.component === 'heading')"
                :key="indexheading"
              >
                <b-list-group-item
                  v-if="item.component === 'heading'"
                  :to="`#${handleheading(item.text)}`"    <--- The reference to the headings
                >
                  {{ item.text }}
                </b-list-group-item>
              </b-list-group>
            </div>
          </div>

Мой основной контент: 

          <div
            v-for="(item, index) in article.mainContent['en']"
            :key="index"
          >

            <header-component
              :id="handleheading(item.text)"          <-- The headings
              v-html="
                `<${item.tag}>${item.text}</${item.tag}>`
              "
             />
         </div>

Мои методы: 

handleheading(heading: any): any {
    const convertSpacesToDashesAndLowercase = heading
      .replace(/\s+/g, '-')
      .toLowerCase();
    const removeSpecialCharacters = convertSpacesToDashesAndLowercase.replace(
      /[^A-Za-z-]/g,
      ''
    );
    return removeSpecialCharacters;
  }

Jquery, не вариант :) Буду признателен за помощь. Спасибо!

1 Ответ

0 голосов
/ 03 февраля 2020 
mounted() {
  const el = document.querySelector(this.$route.hash)
  el && el.scrollIntoView()
}

Это решило это!

...