vue自定义keepalive组件的问题解析
2023-09-27 14:27:34 时间
前一阵来了一个新的需求,要在vue项目中实现一个多开tab页面的功能,本来心想,这不简单嘛就是一个增加按钮重定向吗?(当然如果这么简单我就不写这个文章了)。很快写完,提交测试。测试大哥很快就提交了一个问题:"你两个tab页访问同一个链接,怎么还是个联动的呢?"。我擦,这指定是缓存的问题。
为什么会出现这种情况呢
keep-alive
组件是使用 include
exclude
这两个属性传入组件名称来确认哪些可以被缓存的
<keep-alive exclude="a,b,c" > <router-view></router-view> </keep-alive>
我们在看一下源码,看看人家是怎么实现的(这两张图截的真难看)
思路有了撸代码
group-keep-alive.js
如何使用
意思一下就行了
<group-keep-alive> <router-view :key="key" /> /group-keep-alive> // key一定要区分 computed: { key() { return `${选中index}/${fullpath}` }, }
主题说完了,整点其他的
1. 在group-keep-alive组件中设置了abstract: true,设置当前组件为抽象组件,我的李姐:就是一个对下一级(包含子元素)事件监听等提前拦截,从而对下一级进行操作
2. router-view :key="key" 这key的作用是用来区分同一个组件是不是重复使用一个实例。
相关文章
- (尚043) Vue页面显示错误总结 `xxx`的区别
- Vue 向组件中插入内容
- 【Vue】【子组件】调用【父组件】参数,props属性值【动态】调用的两种方法(图文+完整代码)
- 【Vue】computed和methods的区别与互动(完整示例)
- 【Vue/html】如何解决csdn下载网页后打开自动跳转登陆的问题(已解决)
- Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程
- [转]vue 预览pdf,txt
- Vue: 兄弟组件利用自定义Bus传参
- 推荐 | Vue 入门&进阶路线
- vue 项目中使用scss
- vue引入mock的json数据
- 基于Go语言+Vue MySQL实现(Web)毕业设计网上选题系统【100010336】
- 03-vue基础-组件
- 详解ESLint在Vue中的使用小结
- vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
- vue脚手架用axios请求本地数据
- VUE @hook浅析(监听子组件的生命周期钩子)
- VUE高阶组件解析
- Vue组件的渲染更新原理解析(重要)
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- SpringBoot+Vue实现的文件管理系统 附带详细运行指导视频
- Vue开发实例(13)之axios和mockjs的安装与使用
- vue造轮子,封装组件库-主要前置知识与总结