VUE组件不会在路由URL参数更改时更新

Vue component doesn#39;t update on route URL parameter change(VUE组件不会在路由URL参数更改时更新)

本文介绍了VUE组件不会在路由URL参数更改时更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以我有一个组件,一旦它被挂载,它就会执行代码:

    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调用不会更新我的标记。为什么会发生这种情况?

VueJS

原因很简单,即使推荐答案更改了组件,但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选项并删除了装载的()挂钩

这篇关于VUE组件不会在路由URL参数更改时更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:VUE组件不会在路由URL参数更改时更新

基础教程推荐