【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 底部导航栏封装前一篇文章中我们已经将项目的整体骨

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

前言

前一篇文章中我们已经将项目的整体骨架搭建完毕，接下来就要正式添砖加瓦造掘金了。在正式开始之前我们需要先对掘金官方APP进行一个整体分析，然后再进行撸代码。本次分享我们将会实现以下功能：

底部导航栏封装
创建每个导航按钮对应的空页面并配置每个页面对应的路由信息
点击底部导航实现对应页面切换

官方app页面分析

在开始造代码前，我们先打开官方正式的稀土掘金App进行分析。如下图所示，当我们打开掘金app默认加载的是首页推荐部分的内容，从组件化的角度来考虑该页面至少应该由4个部分组成，分别是：

头部搜索/标签栏
热榜版块
文章内容列表部分（包括官方广告）
底部导航栏当我们点击顶部标签时发现只有中间部分的内容是变化的，而头部和底部均保持不变。当我们再点击底部导航按钮时发现，除了底部导航栏自身没有变，其他顶部标签和中间的内容部分都发生了变化，这时我们就可以得知：“首页、沸点、发现、课程和我的这几个功能模块的页面是共享同一个底部导航栏的，因此我们就可以将底部导航栏单独封装成一个公用组件”。经过简单的一番分析，下面我们就可以真正的着手造代码了。

底部导航栏封装

底部导航栏我们将基于有赞团队的Vant组件库进行封装。在上一篇分享中我们已经安装好了Vant组件库，这里直接使用即可。使用该组件库有两种方式：按需导入所需组件，或者导入Vant的全部组件。这里为了方便我们就使用第二种方式：导入全部组件，正式项目开发中还是建议使用按需导入的方式。首先对main.js做如下改造：

导入Vant组件库
导入Vant组件库所需的Css样式
通过app.use注册Vant组件库改造后的mian.js完整代码如下：

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'lib-flexible'
import Vant from 'vant' //本次新增
import 'vant/lib/index.css'//本次新增

const app = createApp(App);
app.use(router)
    .use(store)
    .use(Vant)//本次新增
    .mount('#app')

接下来在src的components目录下新增一个JBottom.vue组件（我们把一些公共的组件统一放在components目录下管理）。在该组件中使用Vant的tabbar标签组件实现底部导航栏的封装（关于van-tabbar的具体用法可以参照vant官网查看）

在template模板中添加van-tabbar标签，并指定v-model属性值为active
在van-tabbar标签中添加5个子标签van-tabbar-item，分别对应首页、沸点、发现、课程和我
在js的setup函数中定义一个响应式属性active默认值为0，用于指定默认选中导航栏中的首页 JBottom.vue完整代码如下：

<!--JBottom.vue-->
<template>
<van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="fire-o">沸点</van-tabbar-item>
    <van-tabbar-item icon="browsing-history-o">发现</van-tabbar-item>
    <van-tabbar-item icon="coupon-o">课程</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o">我</van-tabbar-item>
</van-tabbar>
</template>

//JBottom.vue
import {reactive, toRefs} from 'vue'
export default{
    setup(){
        const state = reactive({active:0});
        return{
            ...toRefs(state)
        }
    }
}

创建每个导航按钮对应的空页面并配置路由信息

在views下分别创建Home.vue、Fire.vue、Find.vue、Course.vue和Profile.vue五个页面，然后再在router/index.js中分别为5个页面注册对应的路由信息：'/'（首页）、'/fire'（沸点）、'/find'（发现）、'/course'（课程）和'/profile'（我）注册页面路由部分代码如下：

// router/index.js
import Home from '../views/Home.vue'
const routes = [
    {
        path:'/',
        name:"Home",
        component:Home
    },
    {
        path:'/fire',
        name:"Fire",
        component:()=import(/* webpackChunkName: "Fire" */ '../views/Fire.vue')
    }
    ...
]

对应的页面和路由都已经准备完毕，接下来就是在App.vue中导入JBottom.vue组件实现页面的展示了。打开App.vue组件，导入components下的JBottom.vue组件并注册使用。完整代码如下：

<!--App.vue-->
<template>
    <div>
        <router-view />
        <j-bottom />
    </div>
</template>

// App.vue
import JBottom from './components/JBottom.vue'

export default {
    components :{JBottom}
}

html,
body{
    background-color: #f4f4f4;
}

点击底部导航实现页面切换

一切工作准备就绪，迫不及待的运行起来看下效果吧。结果你会发现：运行起来后底部导航栏是有的，但是页面却是空白的，并且点击导航栏按钮时页面也不会切换。这是因为虽然我们封装并导入了底部导航栏组件，也配置了相关的页面路由信息，但是却没有把路由和导航栏关联起来，因此还差一步导航栏与路由的关联。再次打开componets下的JBottom.vue组件

给van-tabbar添加一个route属性，指示开启路由模式
给每个子项van-tabbar-item添加一个to属性，值为对应的页面路由路径，表示点击此项时将跳转到哪个页面 JBottom.vue改造后的代码如下：

<!--JBottom.vue-->
<template>
<van-tabbar v-model="active" route>
    <van-tabbar-item icon="home-o" to='/'>首页</van-tabbar-item>
    <van-tabbar-item icon="fire-o" to="/fire">沸点<van-tabbar-item>
    <van-tabbar-item icon="browsing-history-o" to="/find">发现</van-tabbar-item>
    <van-tabbar-item icon="coupon-o" to="/course">课程</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o" to="/profile">我</van-tabbar-item>
</van-tabbar>
</template>

这时再次刷新页面发现首页两个字已经出现了，再点击导航栏切换也能跳转到对应到页面了。效果图如下：

总结

本次分享我们对底部导航栏实现了封装，并通过路由实现了各个页面的切换。整体下来虽然实现的功能不多，但总的来说还是稍稍有点繁琐的。本次分享就先到这里了，下一次分享中我们将继续来完善我们的网页版掘金App。