[Vue+Vant] 多页面共用底部导航栏 Tabbar

1. 序言

移动端 app 的底部一般有3到5个底部按钮, 每个按钮对应一个页面, 对于此种情况最直观的处理方法是在每个页面中引用底部按钮组件, 但那样会引入很多冗余代码, 也不方便代码的维护. 为了更好地处理多页面共有组件, 可以将组件设置为共用组件, 本文将以底部导航栏 Tabbar 为例记录下详细的设置过程.
由于需要在多个页面间切换, 这里使用了 vue router 来为每个页面创建路由, 项目的创建过程参考 [Vue+Vant] 使用脚手架创建和配置项目

2. 在 views 目录中创建页面文件

假设有以下三个页面

• Home.vue - 主页

<template>
  <div>
    <h1>This is home page</h1>
  </div>
</template>

• Order.vue - 订单

<template>
  <div>
    <h1>This is order page</h1>
  </div>
</template>

• My.vue - 我的

<template>
  <div>
    <h1>This is my page</h1>
  </div>
</template>

3. 在 router 中配置路由