第一种就是使用 vue-router 提供的 meta 对象,给需要缓存如首页、列表页、商详等添加一个字段,用来判断用户是前进还是后退以及是否需要 keep-alive,可以看看大佬的解释文章:-->vue 路由按需 keep-alive (2)实现 首先我们需要在router.js的meta对象里定义两个值: keepAlive:这个路由是否需要缓存 deepth:
要在vue-router中对已路由组件单独使用keep-alive,可以通过以下步骤实现: 在路由配置文件中,将需要缓存的组件包裹在<keep-alive>标签中,例如: 代码语言:txt 复制 const routes = [ { path: '/home', component: () => import('@/views/Home.vue'), meta: { keepAlive: true } // 添加meta字...
然后: meta: { keepAlive: true, //保持状态 这个路由是否需要缓存 deepth: 0.5 //深度 页面之间的前进后退的层次关系 【可以用来搞动画】 },
router.beforeResolve((to) =>{ useCacheComponents.addCacheComponents(to) }) 当用户点击菜单时,调用clearCacheComponents方法即可,记得在router里面添加keepAlive属性,在store里面是通过meta.keepAlive来判断当前组件是否需要缓存,另外在需要缓存的组件里面记得设置唯一的组件名称。 defineOptions({name:'组件名称'})...
<router-viewv-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 根据keepAlive的值来进行是否缓存判断。 这种对于常规的页面缓存是有效的。 但是在项目中,一个页面不会一直被缓存的,有时需要重新渲染。比如,一个列表页(a)、详情页...
第一种 <router-view v-slot="{ Component }"> <template v-if="$route.meta.keepalive"> <keep-alive> <component :is="Component"/> </keep-alive> </template> <template v-else> <component :is="Component"/> </template> </router-view> 第一种 <router-view v-slot="{ Component }"> ...
keepAlive: true // 需要被缓存 } }, { path: '/:id', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ] -v-if <keep-alive><router-viewv-if="$route.meta.keepAlive"><!-- 这里是会被缓存的视图组件,比如 Home! --></router-view></keep-alive><rou...
meta:{keepAlive:false} } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 2.修改 app.js 的根路由视图 <template><divid="app"><keep-alive><!--使用keep-alive会将页面缓存--><router-viewv-if="$route.meta.keepAlive"></router-view></keep-alive><router-viewv-if="!$route.meta....
</router-view> </keep-alive> exclude 例子类似。 缺点:需要知道组件的 name,项目复杂的时候不是很好的选择 增加router.meta 属性 // routes 配置 exportdefault[ { path:'/', name:'home', component: Home, meta: { keepAlive:true// 需要被缓存 ...
<keep-alive><!--需要缓存的视图组件--><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!--不需要缓存的视图组件--><router-view v-if="!$route.meta.keepAlive"></router-view> 2,在router配置中定义哪些需要缓存哪些不需要缓存 ...