How can I scroll to the heading that is added to the url after `#`?

Question

I am using Nuxtjs(Vue) and I have a sidebar which has headings and is scrollspying on my main content that contains those headings. I am using Scrollspy from Boostrap Vue(https://bootstrap-vue.js.org/docs/directives/scrollspy/#example-using-list-group). Every time one of the headings is clicked, the url is updated with the heading name(this works fine). I am converting all the headings into

1. Lower case
2. Remove all special characters
3. Converting all spaces to hyphens

and then adding them to the URL after #

Example: Now when someone enters https://www.mydomainname.com/myarticlelisting/myarticlename#heading-3, I want it to scroll to where heading 3 is.

What works: Url is updated on click of the headings of the sidebar and scrolls to the heading.

What doesn't work: When URL is entered with the heading name after #, it doesn't scroll to the respective heading.

This is what I have:

My sidebar:

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

My main content:

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

My methods:

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

Jquery, not an option :) I would appreciate some help. Thank you!

Answer 1

mounted() {
  const el = document.querySelector(this.$route.hash)
  el && el.scrollIntoView()
}

This solved it!