解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate

 更新时间:2023年10月11日 14:28:18   作者:程序Ms_Wqh  
这篇文章主要介绍了解决VUE3 keep-alive页面切换报错parentComponent.ctx.deactivate is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3 keep-alive页面切换报错:parentComponent.ctx.deactivate is not a function

问题

我们使用判断时  有时候会报错

        <router-view v-slot="{ Component }">
          <keep-alive >
            <component :is="Component" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component"  v-if="!$route.meta.keepAlive" />
        </router-view>
        //keepAlive是在路由里边定义的meta字段 true/false

解决

这个时候我们只需在  <component> 标签上添加  :key=" 唯一值"  就可以解决了,只要是唯一的就可以没有指定要求 推荐使用 $route.name

        <router-view v-slot="{ Component }">
          <keep-alive >
            <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
        </router-view>

vue页面切换keep-alive导致的数据问题

问题描述

每个页面通过computed和watch监测vuex参数,在参数变化时请求ajax更新数据。

在公共组件改变参数时,所有页面都会去重新请求数据,当前页面根据数据重新渲染,但切换回其他页面时,由于keep-alive,页面没有变化。

//vuex  store.js
const state = {
	classes: "",
 	day: "",
}
const mutations = {
  updateClasses(state,payload) {
    state.classes=payload
  },
  updateDay(state,payload) {
    state.day=payload
  },
}
//vue  computed
 classes() {
  return this.$store.state.classes
 },
 day() {
   return this.$store.state.day
 },
 //vue  watch
classes(val) {
    this.updateClassChange()//ajax请求
},
day(val) {
    this.updateDayChange()//ajax请求
}
//公共组件
this.$store.commit('updateClasses', {this.classs})
this.$store.commit('updateDay', {this.day})

解决方法一

第一步:判断此时路由是否是当前页面,避免多余的数据请求,只有当前页面重新请求数据

watch: {
  classes(val) {
    if(this.$route.name=="index") {
      this.updateClassChange()
    }
  },
  day(val) {
    if(this.$route.name=="index") {
      this.updateDayChange()
    }
  }
},

第二部:是用钩子函数activated,每切换路由时重新加载,避免参数变化时页面没有变化

activated() {
 if(this.$route.name=="index"){
     this.init()
   }
 },

该方案问题:参数不变时,虽然不重新渲染,但每次切换路由也会重新请求

解决方法二

在vue为每一个页面存储一个公共组件参数,使个页面参数相互不干扰,keep-alive也不混乱

//vuex  store.js
const state = {
	classesObj:{
    index:"",
    addict:"",
    consume:"",
    mental:""
  },
  dayObj:{
    index:"",
    addict:"",
    consume:"",
    mental:""
  },
}
const mutations = {
 setClassesObj(state,payload){
    if(payload.index){
      state.classesObj.index=payload.index
    }
    if(payload.addict){
      state.classesObj.addict=payload.addict
    }
    if(payload.consume){
      state.classesObj.consume=payload.consume
    }
    if(payload.mental){
      state.classesObj.mental=payload.mental
    }
  },
  setDayObj(state,payload){
    if(payload.index){
      state.dayObj.index=payload.index
    }
    if(payload.addict){
      state.dayObj.addict=payload.addict
    }
    if(payload.consume){
      state.dayObj.consume=payload.consume
    }
    if(payload.mental){
      state.dayObj.mental=payload.mental
    }
  },
}
//vue  computed
classes() {
  return this.$store.state.classesObj[this.$route.name]
},
day() {
  return this.$store.state.dayObj[this.$route.name]
},
 //vue  watch
classes(val) {
    this.updateClassChange()//ajax请求
},
day(val) {
    this.updateDayChange()//ajax请求
}
//公共组件
this.$store.commit('setClassesObj', {[this.$route.name]:this.classs})
this.$store.commit('setDayObj', {[this.$route.name]:this.day})

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 100行代码理解和分析vue2.0响应式架构

    100行代码理解和分析vue2.0响应式架构

    通过100行代码帮助大家理解和分析vue2.0响应式架构的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue混入mixin流程与优缺点详解

    vue混入mixin流程与优缺点详解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-09-09
  • vue3如何使用ref获取元素

    vue3如何使用ref获取元素

    这篇文章主要介绍了vue3如何使用ref获取元素,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue小白入门教程

    vue小白入门教程

    vue是一套用于构建用户界面的渐进式框架,本文通过实例给大家介绍了vue入门教程适用小白初学者,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • Vue 使用 setup 语法糖的示例详解

    Vue 使用 setup 语法糖的示例详解

    在 setup 语法糖中通过 import 引入的内容,也可以直接在 template 标签中使用,这篇文章主要介绍了Vue 使用 setup 语法糖,需要的朋友可以参考下
    2023-10-10
  • Vue中使用vee-validate表单验证的方法

    Vue中使用vee-validate表单验证的方法

    vee validate 一个轻量级的 vue表单验证插件。接下来通过本文给大家分享Vue中使用vee-validate表单验证的方法,需要的朋友参考下吧
    2018-05-05
  • 解决vue项目运行npm run serve报错的问题

    解决vue项目运行npm run serve报错的问题

    这篇文章主要介绍了解决vue项目运行npm run serve报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue中的MVVM模式使用及说明

    Vue中的MVVM模式使用及说明

    这篇文章主要介绍了Vue中的MVVM模式使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue+js点击箭头实现图片切换

    vue+js点击箭头实现图片切换

    这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • react里组件通信的几种方式小结

    react里组件通信的几种方式小结

    本文主要介绍了react里组件通信的几种方式小结,包含了5种方式,主要是props传递,回调函数作为props,Context,Redux或MobX,refs,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06

最新评论