效果图
1、首先在app.vue中，给路由添加keep-alive，使其能够被缓存
2、配置路由 router/index.js
3、书写各部分组件
src/pages/category/header.vue
src/pages/category/tab.vue
src/pages/category/content.vue
src/pages/category/index.vue
4、储存常量和服务器获取来的数据
src/pages/category/config.js
export const CATEGORY_CONTENT_KEY='cyymall-category-content-key';
export const CATEGORY_CONTENT_UPDATE_TIME=1*24*60*60*1000;//1天
export const categoryNames = [
{
'name': '热门推荐',
'id': 'WQR2006'
},
{
'name': '慕淘超市',
'id': 'WQ1968'
},
{
'name': '国际名牌',
'id': 'WQ1969'
},
{
'name': '奢侈品',
'id': 'WQ1970'
},
{
'name': '全球购',
'id': 'WQ1971'
},
{
'name': '男装',
'id': 'WQ1972'
},
{
'name': '女装',
'id': 'WQ1973'
},
{
'name': '男鞋',
'id': 'WQ1974'
},
{
'name': '女鞋',
'id': 'WQ1975'
},
{
'name': '内衣配饰',
'id': 'WQ1976'
},
{
'name': '箱包手袋',
'id': 'WQ1977'
},
{
'name': '美妆个护',
'id': 'WQ1978'
},
{
'name': '钟表珠宝',
'id': 'WQ1979'
},
{
'name': '手机数码',
'id': 'WQ1980'
},
{
'name': '电脑办公',
'id': 'WQ1981'
},
{
'name': '家用电器',
'id': 'WQ1982'
},
{
'name': '食品生鲜',
'id': 'WQ1983'
},
{
'name': '酒水饮料',
'id': 'WQ1984'
},
{
'name': '母婴童鞋',
'id': 'WQ1985'
},
{
'name': '玩具乐器',
'id': 'WQ1986'
},
{
'name': '医药保健',
'id': 'WQ1987'
},
{
'name': '计生情趣',
'id': 'WQ1988'
},
{
'name': '运动户外',
'id': 'WQ1989'
},
{
'name': '汽车用品',
'id': 'WQ1990'
},
{
'name': '家居厨具',
'id': 'WQ1991'
},
{
'name': '家具家装',
'id': 'WQ1992'
},
{
'name': '礼品鲜花',
'id': 'WQ1993'
},
{
'name': '宠物生活',
'id': 'WQ1994'
},
{
'name': '生活旅行',
'id': 'WQ1995'
},
{
'name': '图书音像',
'id': 'WQ1996'
},
{
'name': '邮币',
'id': 'WQ1997'
},
{
'name': '农资绿植',
'id': 'WQ1998'
},
{
'name': '特产馆',
'id': 'WQ1999'
},
{
'name': '慕淘金融',
'id': 'WQ2000'
},
{
'name': '拍卖',
'id': 'WQ2001'
},
{
'name': '房产',
'id': 'WQ2008'
},
{
'name': '二手商品',
'id': 'WQ2002'
}
];
5、axios获取数据
src/api/category.js
import axios from 'axios';
// CancelToken：快速发送多个请求时，取消前面的请求，以最后一个为准
const CancelToken=axios.CancelToken;
let cancel;
//获取数据 ajax
export const getCategorys=(id)=>{
cancel && cancel("取消了前一次请求");
cancel=null;
let url='http://www.imooc.com/api/category/content/'+id;
return axios.get(url,{
cancelToken:new CancelToken(function executor(c){
cancel=c;
})
}).then(res=>{
if(res.data.code===0){
console.log("获取category成功");
return res.data;
}
throw new Error('没有成功获取到数据');
}).catch(err=>{
console.log(err);
});
}
6、localstorage操作缓存
const storage = window.localStorage;
export default {
set(key, val) {
if (val === undefined) {
return;
}
storage.setItem(key, serialize(val));
},
get(key, def) {
const val = deserialize(storage.getItem(key));
return val === undefined ? def : val;
},
remove(key) {
storage.removeItem(key);
},
clear() {
storage.clear();
}
};
function serialize(val) {
return JSON.stringify(val);
}
function deserialize(val) {
if (typeof val !== 'string') {
return undefined;
}
try {
return JSON.parse(val);
} catch (e) {
return val || undefined;
}
}
最后补充一下，关于 $nextTick
