Vue.js 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

我的用户名是这样的：

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

原因很简单，即使URL正在更改组件，VueJS基本上还是在重用组件，因此不会再次调用挂载的方法

通常，您可以只设置一个观察者并重构一点代码

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

---

编辑：添加了inmediate true选项并删除了挂载的钩子。原因很简单，即使URL正在更改组件，VueJS基本上还是在重用组件，因此不会再次调用挂载的方法

通常，您可以只设置一个观察者并重构一点代码

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

---

编辑：添加了inmediate true选项并删除了挂载的挂钩

您可能需要使用动态路径匹配，查看是否有帮助。您是否在组件上设置了关键道具？即？在视图组件之间切换时，这可能需要挂载的钩子触发。用户名不更新是什么意思。我在这里没有看到任何更新用户名属性的代码，你能包含整个文件吗？您的数据函数看起来像什么，为什么不直接调用/markers/'+this.$route.params.username有任何错误发生吗？这需要更多信息。@swonder，他的意思是，如果你转到route/markers/john，然后导航到/markers/smith，它仍然会显示johnWell，因为用户名是根据URL中的用户名参数设置的，我认为如果我更改URL，它会自动更新，但是，它不会。我的代码中没有其他内容与我的问题相关。正是Ljubaddr说的。你可能需要使用动态路由匹配，看看是否有帮助。你在组件上设置了关键道具了吗？即？在视图组件之间切换时，这可能需要挂载的钩子触发。用户名不更新是什么意思。我在这里没有看到任何更新用户名属性的代码，你能包含整个文件吗？您的数据函数看起来像什么，为什么不直接调用/markers/'+this.$route.params.username有任何错误发生吗？这需要更多信息。@swonder，他的意思是，如果你转到route/markers/john，然后导航到/markers/smith，它仍然会显示johnWell，因为用户名是根据URL中的用户名参数设置的，我认为如果我更改URL，它会自动更新，但是，它不会。我的代码中没有其他内容与我的问题相关。正是Ljubaddr所说的。正如我在评论中所说的，我不认为如果您更改为完全相同的组件，该组件将不会再次安装。这证实了这一点。干得好。我很好奇，如果用户转到完全不同的路由，手表处理器会启动吗？如果新路由呈现另一个组件，则不会启动。正如我在评论中所说的，如果您更改为完全相同的组件，我不认为该组件会再次装载。这证实了这一点。干得好。我很好奇，如果用户使用完全不同的路由，手表处理器会启动吗？如果新路由呈现另一个组件，则不会