| Vue 使用 ＜keep | 您所在的位置：网站首页 › vue多级评论组件 › Vue 使用 ＜keep |
Vue 使用 ＜keep
|
keepAlive
缓存展示： 使用 实现缓存目前主流的有两种方法 方法一： 在路由元信息中添加缓存标识： { path: 'json', name: 'json', meta: { ... keepAlive: true ... }, component: () => import('../views/components/json') }, 12345678910 使用 v-if 判断是否缓存 1234这种方法是比较早版本时使用的方法，当时还没有include属性。这个方法虽然方便，但是会带来很多bug，比如无法使用、缓存了不必要的，用来实现嵌套路由操作的布局组件等。 然鹅，我有强迫症，不能接受没有动效 (￣(00)￣) 因此这里重点讲方法二（正在使用的）：1.将路由元信息中包含keepAlive: true的路由记录下来，并将该路由的name属性为维护在使用vuex中的一个keepAliveList: []里。 2.使用的include属性，来实现动态的组件缓存。 先说一下include属性，它的值可以是：字符串，正则表达式，数组 首先我们需要知道keep-alive可以根据include中的值来匹配当前路由对应组件的name属性（！！不是路由的name哦，是组件的name），来判断这个路由中的组件是否需要缓存。因此我们只需要将keepAliveList: []里保存的需要缓存的路由组件name数组传入include即可 因此使用起来就像这样 export default { name: 'index', data () { return { keepAliveList: this.$store.getters.getKeepAliveList, } }, computed: { // 获取缓存列表 getKeepAliveList () { return this.$store.getters.getKeepAliveList }, key () { return this.$route.path } }, watch: { getKeepAliveList (n, o) { this.keepAliveList = n } } } 123456789101112131415161718192021222324252627 但是：如果遇到嵌套的或者嵌套路由（这是很常见的操作），这个时候后面几层中的组件缓存会出问题 比如我有下面的三层结构： { path: '/menu-1', name: 'menu-1', // 布局文件 ，用来实现多层嵌套的 组件访问，对于多层次的路由访问来说，这是必须的 component: layout, children: [ { path: 'menu-2', name: 'menu-2', component: layout, children: [ { path: 'menu-3', name: 'menu-3', meta: { keepAlive: true }, component: () => import('../views/components/menu-3.vue') } ] } ] } 1234567891011121314151617181920212223文件内容 layout.vue export default { name: 'layout' } 12345678我想要访问menu-3，在路由之中可视化可以这么看 ( layout 写错了，淦 )： 我们需要把这个无用的组件从 之中提出， 换句话说是将提升到能缓存的那一层，像这样 需要把嵌套的拍平 也就是在路由守卫中添加一个将无用的 layout 布局过消除的方法： router.beforeEach((to, from, next) => { ... handleKeepAlive(to) ... } /** * 递归处理多余的 layout : ， * 让需要访问的组件保持在第一层 index : 之下 * @param to */ function handleKeepAlive (to) { if (to.matched && to.matched.length > 2) { for (let i = 0; i < to.matched.length; i++) { const element = to.matched[i] if (element.components.default.name === 'layout') { to.matched.splice(i, 1) handleKeepAlive(to) } } } } /** * 方法二：兼容按需加载 * @param to */ async function handleKeepAlive (to) { if (to.matched && to.matched.length > 2) { for (let i = 0; i < to.matched.length; i++) { const element = to.matched[i] if (element.components.default.name === 'layout') { to.matched.splice(i, 1) await handleKeepAlive(to) } // 如果没有按需加载完成则等待加载 if (typeof element.components.default === 'function') { await element.components.default() await handleKeepAlive(to) } } } } 没有进行 layout 移除时
接下来就可以愉快的缓存多层次的组件了 原文链接：https://blog.csdn.net/qq_41912398/article/details/109576635 |
我们可以发现，keep-alive只缓存到第一层，也就是这个组件，而这个组件只是一个组件，这明显不是我们想要的。
【本文地址】