工具函數(shù)
/**
?* 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,
? ? ? ? }
路由前置守衛(wèi)
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>
