Vue+Element-Ui设置标签页切换时保留数据

记录一下最近Vue项目接触到的问题, 在多页面切换的时候, 每次切换页面都会页面重新加载, 很费时间. 所以需要优化, 使得标签页未关闭的情况下, 保留数据, 以便切换访问因为这个问题浏览了大量的资料博客. 基本都是通过把router-view嵌套到keep-alive标签, 但是没能实现.最后发现使用的element框架自带了keep-alive的，只是keep-alive是根据组件名称来缓存的

小白阿楠

5645人浏览 · 2021-09-07 15:54:50

小白阿楠 · 2021-09-07 15:54:50 发布

记录一下最近Vue项目接触到的问题, 在多页面切换的时候, 每次切换页面都会页面重新加载, 很费时间. 所以需要优化, 使得标签页未关闭的情况下, 保留数据, 以便切换访问

在这里插入图片描述

因为这个问题浏览了大量的资料博客. 基本都是通过把router-view嵌套到keep-alive标签, 但是没能实现.
最后发现使用的element框架自带了keep-alive的，只是keep-alive是根据组件名称来缓存的，只需要在组件中加入name: Xxx就行. 首字母大写.
这里的name是路由name. 也就是:
如果你的页面路由地址为user,则要将页面的name设置为User.
如果你的页面路由地址为dept,则要将页面的name设置为Dept

在这里插入图片描述

本次记录结束,希望对你们有所帮助~

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^