Vue 动态控制某个组件的缓存-白红宇

live example:

定义下角色

列表页: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中的怪异现象到底是为什么，你找出来了吗？

/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

B.vue

C.vue

common/eventBus.js

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