解决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})

总结

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

相关文章

  • vue实现菜单权限控制的示例代码

    vue实现菜单权限控制的示例代码

    这篇文章主要介绍了vue实现菜单权限控制的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用element+vuedraggable实现图片上传拖拽排序

    使用element+vuedraggable实现图片上传拖拽排序

    这篇文章主要为大家详细介绍了使用element+vuedraggable实现图片上传拖拽排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现页面跳转和参数传递的两种方式

    vue实现页面跳转和参数传递的两种方式

    这篇文章主要介绍了vue页面跳转和参数传递的两种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Element通过v-for循环渲染的form表单校验的实现

    Element通过v-for循环渲染的form表单校验的实现

    日常业务开发中,form表单校验是一个很常见的问题,本文主要介绍了Element通过v-for循环渲染的form表单校验的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    这篇文章主要给大家介绍了关于如何通过一篇文章带你吃透Vue生命周期,文章通过结合案例更加的通俗易懂,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • vue iview组件表格 render函数的使用方法详解

    vue iview组件表格 render函数的使用方法详解

    下面小编就为大家分享一篇vue iview组件表格 render函数的使用方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue 使用beforeEach实现登录状态检查功能

    Vue 使用beforeEach实现登录状态检查功能

    今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 使用vue如何构建一个自动建站项目

    使用vue如何构建一个自动建站项目

    这篇文章主要介绍了使用vue如何构建一个自动建站项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 深入理解Vue.js3中Reactive的实现

    深入理解Vue.js3中Reactive的实现

    reactive是Vue 3的Composition API中的一个函数,它允许你创建一个响应式的数据对象,本文主要介绍了深入理解Vue.js3中Reactive的实现,感兴趣的可以了解一下
    2024-01-01
  • 基于Vue开发数字输入框组件

    基于Vue开发数字输入框组件

    本文通过实例代码给大家介绍了基于Vue开发数字输入框组件,需要的朋友可以参考下
    2017-12-12

最新评论