Javascript 在Vue js中单击链接后，如何添加URL参数？

我的侧边栏上有标题链接，可以滚动监视我的主要内容，当然，当我单击它们时，会将我带到主要内容中的引用标题。我有来自JSON文件的数据，我想在单击标题时将其添加到当前url

假设我有headings，它包含在我的json对象中：headings.text:

标题1 标题2 标题4 当用户单击标题1时，我希望我当前的URL www.something.com更改为www.something.com/Heading1，其他标题也一样

如何在Vue中实现这一点

这就是我目前所拥有的

   <b-list-group-item :href="`#heading-${headingHash(headings.text)}`"> <--Heading reference.
              <span>
                <b>{{ index + 1 }}.</b> {{ headings.text }} <-- Heading itself.
              </span>
   </b-list-group-item>

---

如果你能帮忙，我将不胜感激。谢谢

如果希望基于a href属性更改url，则需要使用a标记

否则，您可以通过编程方式完成。因此，与其向b-list-group-item添加href，不如添加一个触发函数的单击事件：

<b-list-group-item @click"changeUrl(headings.text)">

你可以用。也就是说，您可以定义单击事件函数，并使用该函数导航到指定的路线

<template>
  <b-list-group-item
    @click="handle(headings.text)"
    :href="`#heading-${headingHash(headings.text)}`"
  >
    <span>
      <b>{{ index + 1 }}.</b> {{ headings.text }}
    </span>
  </b-list-group-item>
</template>

<script>
export default {
  methods: {
    handle(heading) {
      this.$router.push({
        path: `Heading${heading}`
      })
    }
  }
}
</script>

<template>
  <b-list-group-item
    @click="handle(headings.text)"
    :href="`#heading-${headingHash(headings.text)}`"
  >
    <span>
      <b>{{ index + 1 }}.</b> {{ headings.text }}
    </span>
  </b-list-group-item>
</template>

<script>
export default {
  methods: {
    handle(heading) {
      this.$router.push({
        path: `Heading${heading}`
      })
    }
  }
}
</script>