工具函数
/**
* set item
* name
* value
* expires, ms
*/
setItem(name, value, expires) {
if (!localStorage) {
console.log('unsupport localStorage');
return;
}
var obj = {};
obj.value = value;
if (expires) obj.expires = Date.now() + expires;
localStorage.setItem(name, JSON.stringify(obj));
},
/**
* get item
* name
*/
getItem(name) {
if (!localStorage) {
console.log('unsupport localStorage');
return;
}
var objStr = localStorage.getItem(name);
var obj;
try {
obj = JSON.parse(objStr);
} catch (e) {
console.log('json parse error:');
console.log(e);
}
if (!obj) return;
if (obj.expires && obj.expires < Date.now()) {
localStorage.removeItem(name);
return;
}
return obj.value;
},
路由添加
meta: {
keepAlive: true,
require:true,
}
路由前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.require == true) {
if (tools.getItem(to.fullPath)) {
to.meta.keepAlive = true
} else {
tools.setItem(to.fullPath, 1, 120000)
to.meta.keepAlive = false;
}
}
next()
})
渲染
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
