Компонент Vue не обновляется при изменении параметра URL-адреса маршрута.

Question

Итак, у меня есть компонент, который выполняет код после его монтирования следующим образом:

    mounted(){
        axios.get('/markers/' + this.username)
        .then(response => {
            this.markers = response.data.markers
        }).catch((error) => console.log(error));
    }

И я получаю имя пользователя так:

username: this.$route.params.username

однако, если я изменяю параметр URL, имя пользователя не обновляется, поэтому мой вызов AXIOS не обновляет мои маркеры. Почему это происходит?

Answer 1

Причина проста, даже если URL-адрес изменяет компонент, это не так, VueJS в основном повторно использует компонент и поэтому больше не вызывает метод mount ().

Обычно вы можете просто установить наблюдатель и немного изменить свой код

methods: {
    fetchData(userName) {
        axios.get('/markers/' + this.username)
        .then(response => {
            this.markers = response.data.markers
        }).catch((error) => console.log(error));
    }
},
watch: {
    '$route.params': {
        handler(newValue) {
            const { userName } = newValue

            this.fetchData(userName)
        },
        immediate: true,
    }
}

РЕДАКТИРОВАТЬ: Добавлена ​​опция true для промежуточного и удален подключенный () хук