Front-End SolutionsAppearance
Vue-Router
实现部分页面 keep-alive
- 配置路由表
这里利用路由对象的 meta 属性，给meta加属性keepAlive: true，即 keep-alive，不写的话，则默认为非 keep-alive。
- 在 store/index.js 写一个函数，收集
keepAlive为真值的路由。
js
import router from '../router';
function filterKeepAliveRoutes(routes, keepAliveRoutes) {
if (!keepAliveRoutes) keepAliveRoutes = [];
routes.forEach((r) => {
if (r.meta && r.meta.keepAlive) {
keepAliveRoutes.push(r.name);
}
if (r.children && r.children.length) {
filterKeepAliveRoutes(r.children, keepAliveRoutes);
}
});
return keepAliveRoutes;
}
export default new Vuex.Store({
state: {
keepAliveRoutes: filterKeepAliveRoutes(router.options.routes),
},
});
- 将
keepAliveRoutes传递给顶级<router-view />的外部的<keep-alive></keep-alive>的include属性：
html
<keep-alive :include="$store.state.keepAliveRoutes">
<router-view :key="$route.fullPath" />
</keep-alive>
keep-alive 生效前提
如上所说，给
meta加属性keepAlive: true。路由级组件的
name必须设，且必须与路由表的name一致。
调试 keep-alive
调试路由级组件是否被缓存，可以给路由级组件设置destroyed钩子，如果触发则说明缓存失效，不触发则说明缓存成功。
路由变化时如何复现滚动条位置
PC 端 Vue 项目绝大多数是管理系统或者大屏系统。其中，管理系统的页面高度通常不超过 2 屏，所以根本不在乎复现滚动条位置，只要路由切换就无脑滚动到顶部即可；大屏系统没有滚动条。
对于手机端 Vue 项目，请直接使用《H5 仿原生技术方案》。