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选项，并删除了Mounted（）钩子

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

1 个答案: