实现思路
1.vue项目页面入口为App.vue文件(所有页面都将映射到该文件的<router-view/>
中)
2.初始化进入的页面为router.js
文件中path: '/'
所对应的页面(例如如下的Home.vue
文件为初始页面)
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/Home.vue'),
meta: {
title: '首页'
}
}
]
底部导航实现(此处全局使用了Vant.js
组件库)
<template>
<div class="main-wrapper">
<keep-alive>
<component :is="currentPage"></component>
</keep-alive>
<van-tabbar v-model="currentTab">
<van-tabbar-item v-for="item in tabList" :key="item.label" :icon="item.icon">{{item.label}}</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant'
export default {
name: 'Main',
data() {
return {
currentTab: 0,
tabList: [
{
icon: 'wap-home-o',
label: '首页',
component: () => import('./Home')
},
{
icon: 'contact',
label: '我的',
component: () => import('./Profile')
}
]
}
},
computed: {
currentPage() {
return this.tabList[this.currentTab].component
}
},
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem
}
}
</script>
<style lang="stylus">
.main-wrapper
padding-bottom 50px
.van-tabbar-item__icon
font-size 22px
.van-tabbar-item__text
font-size 12px
</style>