我如何滚动到在＃之后添加到网址的标题？

Question

我正在使用Nuxtjs（Vue），并且有一个带有标题的边栏，并且正在滚动浏览包含这些标题的主要内容。我正在使用Boostrap Vue（https://bootstrap-vue.js.org/docs/directives/scrollspy/#example-using-list-group）中的Scrollspy。每次单击一个标题时，URL就会用标题名称进行更新（可以正常使用）。我将所有标题转换为

1. 小写
2. 删除所有特殊字符
3. 将所有空格转换为连字符

然后将它们添加到#之后的URL中>

示例

：现在当有人输入https://www.mydomainname.com/myarticlelisting/myarticlename#heading-3时，我希望它滚动到标题3所在的位置。

有效方法

：单击侧边栏标题可更新网址，并滚动到标题。

什么不起作用

：当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，不是一种选择:)我将不胜感激。谢谢！

我正在使用Nuxtjs（Vue），并且有一个带有标题的边栏，并且正在滚动浏览包含这些标题的主要内容。我正在使用Boostrap Vue中的Scrollspy（https：//bootstrap-vue.js.org / ...

Answer 1

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