Javascript 如何滚动到添加到url中“#”之后的标题？

我使用的是Nuxtjs（Vue），我有一个侧边栏，上面有标题，并且滚动监视我的主要内容，其中包含这些标题。我正在使用Boostrap Vue（）中的Scrollspy。每次单击其中一个标题时，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>

Jquery，不是一个选项：）我将非常感谢您的帮助。谢谢大家!

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

---

这就解决了

你检查过开发控制台了吗？您是否使用通用应用程序（SSR）？我可以想象Nuxt在url中找不到锚。

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

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