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

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

06.01.2020 11:05:57 Просмотров 49 Источник

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

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

  1. Заголовок 1
  2. Заголовок 2
  3. Заголовок 4

Когда пользователь нажимает на Заголовок 1, Мне нужен мой текущий URLwww.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>

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

У вопроса есть решение - Посмотреть?

Ответы - Как я могу добавить URL param после того, как ссылка нажата в Vue js? / How can I add a URL param after a link is clicked in Vue js?

T. Short

06.01.2020 11:29:56

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

В противном случае вы можете сделать это программно. Таким образом, вместо добавления aв hrefto можно добавить событие click, которое вызовет функцию:

b-list-group-item

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

<b-list-group-item @click"changeUrl(headings.text)">
Является ответом!
spjy

06.01.2020 11:31:15

Вы можете использовать маршрутизатор Vue . А именно, вы можете определить функцию click event и использовать программную навигацию vue Router для перехода к указанному вами маршруту.

<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>
Закрыть X