Как вывести параметры фильтра в URL без перезагрузки страницы?

Question

[jazzus]

На авто ру при пагинации и смене параметров фильтра не происходит перезагрузка страницы.
Есть фильтр

<template>
  <form>
    <div>
      <select v-model="filter.type_id" class="form-control" name="type_id">
        <option v-for="type in types" v-bind:key="type.id" v-bind:value="type.id">{{type.name}}</option>
      </select>
    </div>
      <div class="submit">
          <button type="submit" @click.prevent="fetch" class="btn">
              Результаты
          </button>
      </div>
    </form>
</template>

Который отправляет на бэк параметры с помощью axios.get

<script>
export default {
   data() {
        return {
            filter: {
              type_id:null,
            },
        }
    },
   methods: {
        fetch() {
            axios.get(url, {
                params: {
                    type_id: this.filter.type_id,
                }
            })
        }
    }
}
</script>

Мне нужно также получить урл website/filter?type_id=10
В урле значения появляются только если убрать .prevent
Но будет перезагрузка. Как сделать без перезагрузки? Vue знаю поверхностно, буду благодарен за пример.

Answer 1

[Alex]

https://developer.mozilla.org/ru/docs/Web/API/Hist...

Comments

[jazzus]

сделал

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
history.replaceState({type_id: this.filter.type_id}, "type_id", "?type_id="+this.filter.type_id);

к урлу добавляются параметры, но при переходе напрямую по ссылке website/filter?type_id=10 скидывается обратно в website/filter?type_id=null
можно ли как-то связать урл с параметрами в vue или только на бэке отлавливать параметры из урла и передавать их в Vue?

[Alex]

jazzus,

fetch() {
            history.replaceState (/* ... */)
            axios.get(url, {
                params: {
                    type_id: this.filter.type_id,
                }
            })
        }

[jazzus]

Alex, а в моем примере как?

[jazzus]

Alex, урл создает фильтром, но если напрямую по этому урл переходить скидывает в дефолт все параметры