How to display filter parameters in URL without reloading the page?

Question

Vue.js

On auto ru, pagination and changing filter parameters do not reload the page.
There is a filter

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

Which sends back parameters using axios.get

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

I also need to get the url website/filter?type_id=10
In the url, the values ​​appear only if you remove .prevent
But there will be a reboot. How to do without reboot? I know Vue superficially, I will be grateful for an example.

Answer 1

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