点击新路由后Vue组件未更新问题求助

看起来你遇到的是Vue路由组件复用导致的更新问题——当两个路由指向同一个组件时，Vue为了性能优化不会销毁重建组件，只会更新props或路由参数，这就导致你在created钩子中触发的store.dispatch只会执行一次，后续切换路由时即便userCode属性变化了，也不会重新调用接口，组件自然没有更新。

下面是几个可行的解决方案：

方案1：监听userCode属性的变化 #

通过Vue的watch监听userCode的变化，一旦属性更新就重新触发接口请求：

export default {
  // ... 其他代码
  watch: {
    userCode(newVal) {
      if (newVal) {
        this.$store.dispatch('domain/getAll', this.getParam());
      }
    }
  },
  created() {
    this.$store.dispatch('domain/getAll', this.getParam());
  }
}

方案2：监听路由变化（如果userCode来自路由参数） #

如果你的userCode是通过路由参数传递的，还可以直接监听$route的变化：

export default {
  // ... 其他代码
  watch: {
    '$route'(to, from) {
      // 假设userCode来自路由参数，比如to.params.userCode
      this.userCode = to.params.userCode; // 如果props是手动绑定的话
      this.$store.dispatch('domain/getAll', this.getParam());
    }
  },
  created() {
    this.$store.dispatch('domain/getAll', this.getParam());
  }
}

方案3：给路由组件添加key强制重建 #

在路由出口或者组件使用的地方，给组件加上唯一的key（比如用路由路径或者userCode），这样切换路由时Vue会销毁旧组件并创建新组件，created钩子会重新执行：

<!-- 在路由出口处添加key -->
<router-view :key="$route.fullPath"></router-view>

<!-- 或者在直接使用组件时添加key -->
<YourComponent :userCode="userCode" :key="userCode"></YourComponent>

方案4：将getParam改为计算属性（可选优化） #

既然getParam依赖userCode，可以把它改成计算属性，这样userCode变化时会自动更新：

export default {
  // ... 其他代码
  computed: {
    // ... 你的其他计算属性
    getParam() {
      return { code: this.userCode /* 其他参数 */ };
    }
  },
  watch: {
    getParam: {
      deep: true,
      handler() {
        this.$store.dispatch('domain/getAll', this.getParam);
      }
    }
  },
  created() {
    this.$store.dispatch('domain/getAll', this.getParam);
  }
}

你可以根据自己的项目情况选择最合适的方案，一般来说方案1或方案3是最直接有效的。

内容的提问来源于stack exchange，提问作者stack001 stack001