乐趣区

关于前端:keepAlive

jiezi

导航 tab 栏切换

案例

委托治理下的所有子菜单切换

参考代码

svn 提交记录

分支: branches\keepAlive1.0
版本: 10763

指南

例如我当初要给 委托作废 页面减少缓存

  1. 找到页面 url 对应的vueName
  1. 在 委托作废 减少 name 属性

列表与详情切换

案例

委托作废的列表页与详情页切换

参考代码

svn 提交记录

分支: branches\keepAlive1.0
版本: 10765

指南

文件夹构造变更

批改前:

  • index: 列表页
  • Form: 详情页
  • causeForm: 列表页弹窗

批改后:

  • index: 首页
  • list/index: 列表页的首页
  • list/components/causeForm: 列表页的弹窗
  • detail/index: 详情页首页
  • detail/components/Form: 详情页默认展现页(能够依据详情页内有 tab 切换组件自在组件)

重点配置阐明

首页

<template>
  <div style="height:100%">
    <keep-alive :include="include">
      <component
        :is="componentParams.name"
        :componentParams="componentParams"
        @showComponent="onShowComponent"
      ></component>
    </keep-alive>
  </div>
</template>

<script>
import Detail from "./detail/index";
import List from "./list/index.vue";
export default {
  name: "pdm/entrust/discard",
  components: {
    Detail,
    List,
  },
  data() {
    return {
      include: "List", //keepAlive 缓存匹配的页面
      componentParams: {
        name:'List'// 首页默认展现页面
        // data 组件传递的参数
        // isEdit 是否在详情页编辑数据，并向后端发送申请
      },
    };
  },
  methods: {
    // 接管子组件传递的参数
    onShowComponent(val) {this.componentParams = val;},
  },
};
</script>

列表页

接管参数

  props:{
    componentParams: {
      type: Object,
      default() {return {};
      },
    },
  },

跳转详情页

methods:{searchEntrust() {
        this.$emit("showComponent", {
          name: "Detail",
          data: searchEntrustData, // 要传递的参数
        });     
  }
}

是否从详情页编辑数据，跳转回来

  activated(){
    // 1. 此判断为从详情页面编辑数据再跳转回列表页，// 2. 如果有在详情情编辑数据，并向后端的发送申请，则传 isEdit:true，刷新数据
    // if (this.componentParams.isEdit) {// this.initData(); 
    // }
  },

详情页

列表跳转详情默认不缓存，个别传 id 过去，申请详情接口

接管参数

  props:{
    componentParams: {
      type: Object,
      default() {return {};
      },
    },
  },

申请详情接口

  created() {
    const searchEntrustData = this.componentParams.data
    this.init(searchEntrustData[0].id,true,searchEntrustData[0],searchEntrustData)
  },

组件 tab 栏切换

工作量的问题，暂不解决，因为与页面数据缓存的用户体验不是很强烈，可留到前面全局优化的时候再解决

退出移动版