Vue的路由/页面缓存及子组件刷新问题 |
您所在的位置：网站首页 › vue组件缓存方式 › Vue的路由/页面缓存及子组件刷新问题 |
|
文章目录
需求说明分析及解决路由缓存页面组件刷新
需求说明
1、部分路由需要做缓存 2、单页面中部分组件需要重新渲染，比如：对表格进行新增、删除、修改等之后需要刷新页面中的部分组件 keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们 分析及解决 路由缓存由于只缓存部分页面， 这种将全部缓存的方式不可行，需要加一些判断来实现。 再配合在路由定义中加入： meta: {keepAlive: true}这样就可以实现只缓存路由keepAlive设置为true的路由； 值得注意的是： ！！！建议在App.vue中就设置，而且如果想要缓存的路由是某个父路由的子路由，这个父路由是不用使用的，直接使用就行了，否则会造成缓存的混乱。 页面组件刷新通常手动刷新组件就是使用$nextTick()进行，如： data(){ return { testComponentVisible: true, } }, methods: { closeComponent() { this.testComponentVisible = false; this.$nextTick(()=> { this.testComponentVisible = true; }) } },但是如果组件刷新的情况变得很多之后就会重复多次定义上面的代码，如何一劳永逸呢？ 具体做法是： 在App.vue中定义一个全局使用， provide() { return { reload: this.reload, }; }, data() { return { isRouterAlive: true }; }, methods: { reload() { console.log('启动'); this.isRouterAlive = false; this.$nextTick(function () { this.isRouterAlive = true; }); }, },provide由于是在App.vue中定义所以是可以给到所有的组件之间获取的。 在子组件中使用inject: ['reload'],就可以获取； 比如子组件 子组件里面只需要在完成对表格进行新增、删除、修改等之后 this.$emit("reload")这样就可以刷新组件了。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |