Как добавить параметр URL после нажатия на ссылку в Vue js?

Question

У меня есть ссылки на заголовки на боковой панели, которые прокручивают мой основной контент и, конечно, приводят меня к ссылочному заголовку в основном контенте, когда я нажимаю на них. У меня есть данные из файла JSON, и я хотел бы добавить заголовки к текущему URL, когда они нажимаются.

Допустим, у меня есть заголовки (они содержатся в моем json объекте: headings.text):

1. Заголовок 1
2. Заголовок 2
3. Заголовок 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>

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

Answer 1

Вы можете использовать Vue Маршрутизатор . А именно, вы можете определить функцию события щелчка и использовать Vue Programmati маршрутизатора c navigation , чтобы перейти к указанному вами маршруту.

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

Answer 2

Если вы хотите, чтобы URL изменялся в зависимости от атрибута href, вам необходимо использовать тег a.

В противном случае вы можете сделать это программно. Таким образом, вместо добавления href к b-list-group-item можно добавить событие щелчка, которое вызовет функцию:

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

И ваш метод может выглядеть примерно так:

methods: {
    changeUrl(text) {
      window.location.href = `#heading-${this.headingHash(text)}`;
    }
}