Vue单文件组件之一：底部导航栏

移动端场景下经常会要求屏幕底部有Tab类型的导航栏，我们可以把它做成组件，方便复用。

这里采用Vue的单文件组件模式，即template和js/css代码都在一个vue文件中。

<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="home">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="info" dot>申请</van-tabbar-item>
      <van-tabbar-item icon="search" to="goods">查询</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="user" info="5">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';

export default {
    name: 'apo-foot',
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem
    },
    data () {
      return {
        active: 0
      }
    }
}

</script>

这里引用了vant组件库中的Tabbar来构建底部导航栏。

然后就可以在其它vue文件中引用这个组件了

<template>
  <div id="app">
    <router-view />
    <apo-foot></apo-foot>
  </div>
</template>

<script>
import Foot from '@/components/Foot.vue';

export default {
    components: {
        'apo-foot': Foot
    }
};
</script>

最合适的地方当然是起始vue文件，这样每次切换的是router-view的内容，而foot则一直可以保持不变。

效果图