vue 路由 按需 keep-alive

vue

1.把需要缓存和不需要缓存的视图组件区分开

思路如下图:

 

  1. 写2个 router-view 出口

<keep-alive>

<!-- 需要缓存的视图组件 -->

<router-view v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<!-- 不需要缓存的视图组件 -->

<router-view v-if="!$route.meta.keepAlive">

</router-view>

复制代码

  1. Router里定义好需要缓存的视图组件

new Router({

routes: [

{

path: '/',

name: 'index',

component: () => import('./views/keep-alive/index.vue'),

meta: {

deepth: 0.5

}

},

{

path: '/list',

name: 'list',

component: () => import('./views/keep-alive/list.vue'),

meta: {

deepth: 1

keepAlive: true //需要被缓存

}

},

{

path: '/detail',

name: 'detail',

component: () => import('./views/keep-alive/detail.vue'),

meta: {

deepth: 2

}

}

]

})

复制代码

2.按需keep-alive

 

 

我们从官方文档提供的api入手,

keep-alive组件如果设置了 include ,就只有和 include 匹配的组件会被缓存,

所以思路就是,动态修改 include 数组来实现按需缓存。

 

<keep-alive>

<!-- 需要缓存的视图组件 -->

<router-view :include="include" v-if="$route.meta.keepAlive">

</router-view>

</keep-alive>

<!-- 不需要缓存的视图组件 -->

<router-view v-if="!$route.meta.keepAlive">

</router-view>

复制代码

让我们在app.vue里监听路由的变化,

export default {

name: "app",

data: () => ({

include: []

}),

watch: {

$route(to, from) {

//如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组

if (to.meta.keepAlive) {

!this.include.includes(to.name) && this.include.push(to.name);

}

//如果 要 form(离开) 的页面是 keepAlive缓存的,

//再根据 deepth 来判断是前进还是后退

//如果是后退

if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {

var index = this.include.indexOf(from.name);

index !== -1 && this.include.splice(index, 1);

}

}

}

};

复制代码

需要注意的是

 

keep-alive需要其包裹的组件有name属性,

我们上面的代码中的 pushsplice 的是 routername

所以建议大家把 routename属性设置和 route对应componentname设成一样的。

 

result

让我们验证一下我们的成果

 

 

在 vue-devtool 里,灰色的组件,代表是缓存状态的组件,注意观察list的变化。

写在最后

  1. 实现按需 keep-alive ,网上有方法,通过修改 route 配置里的 meta里的 keepAlive 值来实现。

 

直接修改 meta 的值,可能会出现上图的情况,keep-alive里有一直有一个缓存的 list,正常的 rotuer-view 里也有一个,



链接:https://juejin.im/post/5cdcbae9e51d454759351d84

以上是 vue 路由 按需 keep-alive 的全部内容, 来源链接: utcz.com/z/377482.html

回到顶部