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