vue根据url获取内容axios_vue分类页开发--axios数据获取，localstorage数据缓存

效果图

1、首先在app.vue中，给路由添加keep-alive，使其能够被缓存

2、配置路由 router/index.js

3、书写各部分组件

src/pages/category/header.vue

搜索框

name:'CategoryHeader'}

background-color:rgba(222,24,27,0.9);

transition:background-color 0.5s;

display: flex;

justify-content: space-between;

align-items: center;

padding:5px 20px;

.iconfont{

font-size:24px;

color:#fff;

}

.header-center{

flex:1;

}

}

src/pages/category/tab.vue

• { {item.name}}

export{

name:'CategoryTab',data(){return{

items:categoryNames,curId:""}

},created(){this.switchTab(this.items[0].id);

},methods:{

switchTab(id){this.curId=id;this.$emit("switch-tab",id);//派发事件，传递id

}

}

}

width:100%;

height:100%;

overflow:auto;

}

.tab {

width:100%;

height:auto;&-item {

height: 46px;

background-color: #fff;

border-right: 1px solid #e5e5e5;

border-bottom: 1px solid #e5e5e5;

color: #080808;

font-size: 14px;

font-weight: bold;

text-align: center;

line-height: 46px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;&:last-child {

border-bottom: none;

}

}&-item-active {

background: none;

border-right: none;

color: #f23030;

}