Vue-cli3 移動端底部導航實現思路

實現思路
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>