vue.js - Vue 组件不会在路由 URL 参数更改时更新

标签 vue.js vuejs2 vue-router

所以我有一个组件,它在安装后执行代码,如下所示:

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 基本上是在重用组件,因此不会再次调用 mounted() 方法。

通常你可以设置一个观察者并重构你的代码

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

编辑:添加了 immediate true 选项并删除了 mounted() Hook

关于vue.js - Vue 组件不会在路由 URL 参数更改时更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54251233/

相关文章:

javascript - 通过 Vue-Laravel API 资源连接获取包装数据

javascript - 如何导出分配给变量的要求?

javascript - 如何同时搜索 vendor 名称?

Vue.js/Mixins - 有没有办法在 vue 组件之外获取全局 mixin 对象?

javascript - 在 Vue.js 中如何使用多个路由 View ,其中一个在另一个组件中?

javascript - 尝试使用 vue 和 webpack : __WEBPACK_IMPORTED_MODULE_3_keycloak_js__ is not a function 安装 keycloak-js 时出现未捕获的类型错误

vue.js - 在 Vuetify 字段中隐藏密码字符

html - 单击按钮时Vuejs重定向到url

vue.js - VUE和Axios API : Passing error code from api,来存储,到vue组件

vue.js - 使用 router.beforeEach 时 Vue 路由器 View 不呈现