因为keepalive 是对直接自己组件生效的, 那么缓存就会失效, 可以创建一个Test组件(名字随便取,但是需要的keepalive的数组中注意一定要准确, 他可以是公用的, 所有的同级路由都可以用它来当做Routeview页面), 用它来占位;然后在AppMain的keepalive里面提前写上这个组件的name, 此时你可能会考虑到怎么解决当我关闭 ta...
在使用 Vue 的 keep-alive 功能时,如果遇到 keep-alive 没有生效的情况,可以按照以下步骤进行排查和解决: 检查keep-alive 标签是否正确包裹在需要缓存的组件外部: 确保keep-alive 标签正确包裹了需要缓存的组件。例如,如果你希望缓存 <router-view> 中的组件,你应该这样写: vue <keep-alive> &...
这时候从页面A调到没有设置keepAlive的页面B,再回到页面A,页面A缓存失效。 尝试解决:A页面beforeRouteEnter,设置keepAlive,失败! 1 2 3 4 beforeRouteEnter(to,form,next){ to.meta.keepAlive =true; next(); } n久之后,发现了问题,App.vue配置路由展示的写法不正确,v-if需要写在<router-view />,写在<...
页面缓存了,但是没有Home和User组件没有生效,把v-if替换成v-show就可以了。 原因就是跟生命周期的执行顺序有关,access('home')是通过接口异步请求是否展示当前tab,keep-alive标签只会缓存在生命周期钩子(created或者mounted)model数据,access('home')返回的异步数据肯定晚于生命周期钩子执行顺序。 <el-tabsv-model=...
问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题: 路由如下: 代码解读 var menus = [ { path: '/user', name: '用户', component: '/user', ...
在一个列表页 这个列表页有分类的标签 有筛选条件 当用户选择后进入详情页需要保留这些数据 退回是筛选条件还在 当时想的肯定是用keep-alive缓存了 但是我发现了一个问题 就是第一次从详情页退回不会缓存 第二次才会。解决办法: 方法一 <keep-alive><router-viewv-if="this.$route.meta.keepAlive"></router...
一般做使用keep-alive,都是下面这种方式,因为有的页面可以被缓存,但是有的却不行。 <transition name="fade" mode="out-in"> <!-- 做菜单页面缓存 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </transition>然后至于你的问题。根据你提供的信息,目前...
一般做使用keep-alive,都是下面这种方式,因为有的页面可以被缓存,但是有的却不行。 <transition name="fade" mode="out-in"> <!-- 做菜单页面缓存 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </transition> 然后至于你的问题。根据你提供的信息,目前...
> </keep-alive> </template> // router/index.vue { path: '/dataCenter', component: Layout, children: [ { path: '/dataCenter', name: 'dataCenter', component: () => import('@/views/dataCenter/index'), meta: { title: '', icon: 'icon-shujuku', keepAlive: true } } ] } 使用ke...