[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 中配置路由

import { createRouter, createWebHistory } from 'vue-router'


const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/order',
    name: 'Order',
    component: () => import('../views/Order.vue')
  },
  {
    path: '/my',
    name: 'My',
    component: () => import('../views/My.vue')
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. 在 components 目录中创建组件

Vant 的 Tabbar 组件允许为每个按钮设置跳转路由, 具体写法如下

<template>
  <div>
    <router-view />

    <van-tabbar route v-model="active" @change="onChange">
      <van-tabbar-item replace to="/home" icon="wap-home">首页</van-tabbar-item>
      <van-tabbar-item replace to="/order" icon="column">订单</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="manager">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChange(index) {
      this.active=index
    },
  },
};
</script>

注意这里的路由出口 , 这种写法可以认为是把路由出口和入口都放在了 Tabbar 组件中

5. 在 App.vue 中引用 Tabbar 组件

<template>
  <div>
    <Tabbar/>
  </div>
</template>

<script>

import Tabbar from "@/components/Tabbar.vue"


export default {
  name: "app",
  components: {
    Tabbar,
  },
};
</script>