转发：https://blog.csdn.net/qq_33505829/article/details/98847457
-
需求： 回退页面不刷新，保持原样，数据缓存。
-
做法：使用vue 的keep-alive ,保持组件的数据缓存，避免被重新渲染。
-
keep-alive的用法：
<keep-alive include="viewer">
<router-view></router-view>
</keep-alive>
keep-alive的两个props ，inclue (包含那些name的组件)和exclude (不包含那些name的组件)， 可以是字符串，也可以是正则表达式。
name 的命名可以在组件内部：
// 组件 viewer
export default {
name: 'viewer',
data () {
return {}
}
}
这样就被缓存了。如果不写include或者exclude 那些，所有的组件都会被缓存 。
4.继续深入使用：
项目比较复杂的时候，组件不可能命名 ，好多，找着也不方便。所以，有另外的写法，参考如下 ：
利用 v-router的meta属性，在配置路由的时候，配置keepAlive的属性值。
// routes 配置
export default [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/edit',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
然后在组件引入的时候这样写 ：
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件，比如 Home！ -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>
- 继续深入 ，如果有 abc 三个组件，a到b 组件不刷新，c到b刷新，那配置b组件的meta 就不能写死了 。何解？
可以利用v-router的beforeRouteLeave属性：
在b组件 ：
{
path: '/',
name: 'b',
component: b,
meta: {
keepAlive: true // 需要被缓存
}
}
a 到 b是不刷新的，即被缓存，keepAlive = true; c 组件到b 组件刷新，即不被缓存，keepAlive = false;
// a组件
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 b 缓存，即不刷新
next();
}
};
// c 组件
export default {
data() {
return {};
},
methods: {},
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 a 不缓存，即刷新
next();
}
};
好了 ，keepAlive 的用法，你学会了吗？
————————————————
版权声明：本文为CSDN博主「杰森精灵」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33505829/article/details/98847457
网友评论