账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router 子组件不能重新渲染
    36
    0

    问题描述:
    在浏览器中输入路由地址如下(http://localhost:9090/#/performance/statistics),
    第一次改变路由参数后回车(http://localhost:9090/#/performance/statistics?id=59dee8b355)
    此时页面内容没有变,也没有发出任何请求。再次回车页面可以重新加载
    注:初步判断是由于它们是共用同一个组件,vue中组件会默认缓存因此不会再次加载。如果是这样我应该如何让第一改变路由时刷新页面?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ①颗薪為誰而空 普通会员 1楼

      在Vue Router中,子组件无法重新渲染,这是因为Vue Router将所有的子组件视作单个页面,即使它们在路由的状态中不同。如果你想让子组件在路由的状态改变时重新渲染,你可能需要使用Vuex或者Redux等状态管理库。

      在Vuex中,你可以使用immerDeepSet来更新组件的状态,这将确保状态的完整性和一致性。在Redux中,你可以使用mapStatemapActions来创建新的状态和事件。

      例如,在Vuex中:

      ```javascript import { immerDeepSet } from 'vuex';

      export default { state: { count: 0 }, mutations: { increment (state) { immerDeepSet(state.count, 1); } }, actions: { increment ({ commit }) { commit('increment'); } } }; ```

      然后在子组件中,你可以使用this.$store.dispatch来触发状态的改变:

      javascript export default { props: { count: { type: Number, required: true } }, methods: { increment () { this.$store.dispatch('increment'); } } };

      这样,即使子组件的状态在路由的状态中不同,它仍然可以通过increment方法来触发状态的改变。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部