m/src/Layout.vue
2021-01-01 10:07:56 +08:00

43 lines
1.2 KiB
Vue

<template>
<div>
<div id="app-content" style="padding-bottom:50px;">
<!-- <keep-alive>-->
<!-- 缓存加载过的界面 -->
<router-view />
<!-- </keep-alive>-->
</div>
<van-tabbar v-model="active">
<van-tabbar-item name="home" replace to="/" icon="home-o">首页</van-tabbar-item>
<van-tabbar-item name="cate" replace to="/cate" icon="apps-o">分类</van-tabbar-item>
<van-tabbar-item name="cart" replace to="/cart" icon="chat-o">购物车</van-tabbar-item>
<van-tabbar-item name="my" replace to="/my" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
const navKeys = {
'/':'home',
'/cate':'cate',
'/cart':'cart',
'/my':'my'
}
export default {
data(){
return {
active: 'home',
}
},
mounted() {
if(navKeys[this.$route.path]){
this.active = navKeys[this.$route.path];
}else{
this.active = 'home'
}
},
watch:{
// '$route'(){
//
// }
}
}
</script>