Vue 动态控制某个组件的缓存

live example: https://cc.czcczc.cc/20180703/

定义下角色

列表页:A.vue  可以理解为，后台数据管理页面的数据列表页

编辑页:B.vue  可以理解为，后台数据管理页面的单条数据编辑页

编辑选项页:C.vue 可以理解为，由单条数据编辑页跳转到的一个单列表页，选了之后带参跳回B（自行脑补TB_APP中的选择收货地址）

先描述下需求，

1、列表页A，显示N条数据项，单击其中一项跳转到编辑页B

2、当然，点击A当中的不同数据项，B的呈现肯定是不一样的，A>B1>A>B2时候，B2页面里面不能显示B1的内容（看到这里，就觉得，没必要设置缓存，对吧，且看下面）

3、在编辑页中，我需要触发一个事件跳转到C页面，例如选择收货地址，选择一个之后，跳回编辑页面B，并传递选择项的参数（如index）过来，页面B根据传递过来的参数，进行页面内容变化呈现。那么必须要保证之前编辑页的输入项还存在（总不能选个收货地址，填好的电话号码姓名其他信息都扔掉吧），也就是期望B1.1>B1.2>C>B1.3时候，不会出现B1.1>B1.2>C>B1.1，所以，编辑页面B必须得缓存，

4、那么，问题来了。    编辑页面B要保证从A跳到B时候，B页面都要重新加载，C回到A的时候，B显示之前的页面
 

问题一个个解决，先解决第一个，

1、如何使用页面缓存功能？

    1.1App.vue文件中必须要把<router-view>包裹起来
    1.2index.js中配置路由时候，设置路由meta属性中的keepAlive子属性为true

走完这一步，所有的页面都会被缓存，现在解决第二个问题

2、如何在B到C，然后C到B的时候，从C中把参数传递到B中

     详见B.vue中设置监听事件，以及C.vue中的emit动作。C中发指令，B中执行对应操作

走完这一步，会发现A>B>A>B>C>B时候，bus.on里面对应的事件会触发两次，那么

3、如何移除事件，确保不要重复注册

    详见B.vue中beforeDestroy事件，当页面被移除时候，就移除该事件

现在就剩最后一步了。

4、如何确保A>B的时候，B都是重新加载？

    修改index.js中 A.vue中的meta.keepAlive = false

按理来说，应该在A跳到B之前。name:"B"的router的meta.keepAlive = false即可。但是后续第一次B>C>B的时候，页面还是重新加载了。但是按照上面设置就没有问题了。感觉这个需求是“误打正着”“试错”实现出来的

需求是实现了，那么最后一个问题

5、4中的怪异现象到底是为什么，你找出来了吗？

<template>
  <div id="app">
//吐槽下，网上有个范例keepAlive写的是keep-alive，很迷糊
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

/router/index.js 注意注释的地方，【注意这里，整个教程这里是最关键的地方】

import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      redirect: {
        name: 'A'
      }
    },
    {
      path: '/A',
      name: 'A',
      component: A,
      meta: {
        keepAlive: false//【注意这里，我设置的是！！！！false，整个教程这里是最关键的】
      }
    },
    {
      path: '/B',
      name: 'B',
      component: B,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/C',
      name: 'C',
      component: C,
      meta: {
        keepAlive: true
      }
    }
  ]
})

A.vue

<template>
  <div class="hello">
    这是大列表页
    <router-link :to="{name: 'B'}">到B</router-link>
  </div>
  
</template>

<script>
export default {
  name: "B",
  data() {
    return {};
  }
};
</script>

B.vue

<template>
  <div class="hello">
    这是详情页，里面有一个input
    <div @click="bchange">{{myText}}</div>
    <router-link :to="{name: 'A'}">到A</router-link>
    <router-link :to="{name: 'C'}">到C</router-link>
  </div>
</template>

<script>
import bus from "../common/eventBus";
export default {
  name: "A",
  data() {
    return {
      myText: "点我变换"
    };
  },
  mounted: function() {//挂载的时候设置监听
    var _this = this;
    console.log("B的监听事件被注册");
    bus.$on("C_Change_B", function(res) {
      console.log("接收到通知了", res);
      _this.myText = res;
    });
  },
  beforeDestroy() {//确保不会重复注册该类型事件
    console.log("移除事件注册");
    bus.$off("C_Change_B");
  },
  methods: {
    bchange() {
      this.myText = "点击之后，B自身修改的";
    }
  }
};
</script>

C.vue

<template>
  <div class="hello">
    子列表页，这边点了，详情页就变了
    <div @click="change(1)">
      把输入框的变成1
    </div>
    <div @click="change(2)">
      把输入框的变成2
    </div>
    <div @click="change(3)">
      把输入框的变成3
    </div>

  </div>
</template>

<script>
import bus from "../common/eventBus";
export default {
  name: "C",
  data() {
    return {};
  },
  methods: {
    change(res) {
      bus.$emit("C_Change_B", "C端提出修改的" + res);
      this.$router.go(-1)
    }
  }
};
</script>

common/eventBus.js

import Vue from 'vue';
export default new Vue();

 live example: https://cc.czcczc.cc/20180703/

定义下角色

列表页:A.vue  可以理解为，后台数据管理页面的数据列表页

编辑页:B.vue  可以理解为，后台数据管理页面的单条数据编辑页

编辑选项页:C.vue 可以理解为，由单条数据编辑页跳转到的一个单列表页，选了之后带参跳回B（自行脑补TB_APP中的选择收货地址）

先描述下需求，

1、列表页A，显示N条数据项，单击其中一项跳转到编辑页B

2、当然，点击A当中的不同数据项，B的呈现肯定是不一样的，A>B1>A>B2时候，B2页面里面不能显示B1的内容（看到这里，就觉得，没必要设置缓存，对吧，且看下面）

3、在编辑页中，我需要触发一个事件跳转到C页面，例如选择收货地址，选择一个之后，跳回编辑页面B，并传递选择项的参数（如index）过来，页面B根据传递过来的参数，进行页面内容变化呈现。那么必须要保证之前编辑页的输入项还存在（总不能选个收货地址，填好的电话号码姓名其他信息都扔掉吧），也就是期望B1.1>B1.2>C>B1.3时候，不会出现B1.1>B1.2>C>B1.1，所以，编辑页面B必须得缓存，

4、那么，问题来了。    编辑页面B要保证从A跳到B时候，B页面都要重新加载，C回到A的时候，B显示之前的页面
 

问题一个个解决，先解决第一个，

1、如何使用页面缓存功能？

    1.1App.vue文件中必须要把<router-view>包裹起来
    1.2index.js中配置路由时候，设置路由meta属性中的keepAlive子属性为true

走完这一步，所有的页面都会被缓存，现在解决第二个问题

2、如何在B到C，然后C到B的时候，从C中把参数传递到B中

     详见B.vue中设置监听事件，以及C.vue中的emit动作。C中发指令，B中执行对应操作

走完这一步，会发现A>B>A>B>C>B时候，bus.on里面对应的事件会触发两次，那么

3、如何移除事件，确保不要重复注册

    详见B.vue中beforeDestroy事件，当页面被移除时候，就移除该事件

现在就剩最后一步了。

4、如何确保A>B的时候，B都是重新加载？

    修改index.js中 A.vue中的meta.keepAlive = false

按理来说，应该在A跳到B之前。name:"B"的router的meta.keepAlive = false即可。但是后续第一次B>C>B的时候，页面还是重新加载了。但是按照上面设置就没有问题了。感觉这个需求是“误打正着”“试错”实现出来的

需求是实现了，那么最后一个问题

5、4中的怪异现象到底是为什么，你找出来了吗？

<template>
  <div id="app">
//吐槽下，网上有个范例keepAlive写的是keep-alive，很迷糊
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

/router/index.js 注意注释的地方，【注意这里，整个教程这里是最关键的地方】

import Vue from 'vue'
import Router from 'vue-router'
import A from '@/components/A'
import B from '@/components/B'
import C from '@/components/C'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      redirect: {
        name: 'A'
      }
    },
    {
      path: '/A',
      name: 'A',
      component: A,
      meta: {
        keepAlive: false//【注意这里，我设置的是！！！！false，整个教程这里是最关键的】
      }
    },
    {
      path: '/B',
      name: 'B',
      component: B,
      meta: {
        keepAlive: true
      }
    },
    {
      path: '/C',
      name: 'C',
      component: C,
      meta: {
        keepAlive: true
      }
    }
  ]
})

A.vue

<template>
  <div class="hello">
    这是大列表页
    <router-link :to="{name: 'B'}">到B</router-link>
  </div>
  
</template>

<script>
export default {
  name: "B",
  data() {
    return {};
  }
};
</script>

B.vue

<template>
  <div class="hello">
    这是详情页，里面有一个input
    <div @click="bchange">{{myText}}</div>
    <router-link :to="{name: 'A'}">到A</router-link>
    <router-link :to="{name: 'C'}">到C</router-link>
  </div>
</template>

<script>
import bus from "../common/eventBus";
export default {
  name: "A",
  data() {
    return {
      myText: "点我变换"
    };
  },
  mounted: function() {//挂载的时候设置监听
    var _this = this;
    console.log("B的监听事件被注册");
    bus.$on("C_Change_B", function(res) {
      console.log("接收到通知了", res);
      _this.myText = res;
    });
  },
  beforeDestroy() {//确保不会重复注册该类型事件
    console.log("移除事件注册");
    bus.$off("C_Change_B");
  },
  methods: {
    bchange() {
      this.myText = "点击之后，B自身修改的";
    }
  }
};
</script>

C.vue

<template>
  <div class="hello">
    子列表页，这边点了，详情页就变了
    <div @click="change(1)">
      把输入框的变成1
    </div>
    <div @click="change(2)">
      把输入框的变成2
    </div>
    <div @click="change(3)">
      把输入框的变成3
    </div>

  </div>
</template>

<script>
import bus from "../common/eventBus";
export default {
  name: "C",
  data() {
    return {};
  },
  methods: {
    change(res) {
      bus.$emit("C_Change_B", "C端提出修改的" + res);
      this.$router.go(-1)
    }
  }
};
</script>

common/eventBus.js

import Vue from 'vue';
export default new Vue();

原文发布时间：2018-07-03

原文作者：微信小程序-暗潮

本文来源掘金如需转载请紧急联系作者