Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（开发导航栏及公共部分）_前端杂货铺_vue3 van-tabbar

网络 02-07 4062

基于 Vue3.x + Vant UI 的多功能记账本（三）

文章目录基于 Vue3.x + Vant UI 的多功能记账本（三）项目演示开发导航栏1、底部导航栏2、测试底部导航栏3、公共头部写到最后（附源码）

系列内容参考链接基于 Vue3.x + Vant UI 的多功能记账本（一）项目演示，涉及知识点基于 Vue3.x + Vant UI 的多功能记账本（二）搭建开发环境

项目演示

Vue3 + Vant UI_多功能记账本

开发导航栏 1、底部导航栏

components 文件夹下，创建 NavBar.vue 组件

NavBar.vue

详细内容请看代码和注释van-tabbar-item 为标签栏

<template> <van-tabbar v-model="active">  <van-tabbar-item icon="notes-o" @click="link('/home')" >明细</van-tabbar-item > <van-tabbar-item icon="bar-chart-o" @click="link('/data')" >统计</van-tabbar-item > <van-tabbar-item icon="user-o" @click="link('/user')">我的</van-tabbar-item> </van-tabbar> </template> <script> import { ref } from "vue"; import { useRouter } from "vue-router"; export default { name: "NavBar", props: { msg: String, // 限制 msg 的类型为字符串 }, // 相当于 vue2.x 的 beforeCreate 和 created setup() { // 使用路由 const router = useRouter(); const active = ref(0); // 路由跳转 const link = (path) => { router.push({ path }); }; return { active, link, }; }, }; </script>

Data.vue

<template>统计</template> <script> export default { name: "Data", }; </script>

User.vue

<template>个人中心</template> <script> export default { name: "User", }; </script>

在 src/router/inedx.js 将这三个页面给定对应的路径

// 用的是 hash 路由，不需要后端支持 import { createRouter, createWebHashHistory } from "vue-router"; import Home from '../views/Home.vue' import Data from '../views/Data.vue' import User from '../views/User.vue' // 创建路由实例 const router = createRouter({ history: createWebHashHistory(), // hash 模式 routes: [ { path: "/", component: Home }, { path: "/home", component: Home }, { path: "/data", component: Data }, { path: "/user", component: User }, ] }) // 抛出路由实例 export default router

在 App.vue 中引入 NavBar 组件

App.vue

<template> <router-view /> <NavBar /> </template> <script> import Home from "./views/Home.vue"; import NavBar from "./components/NavBar.vue"; export default { name: "App", components: { Home, NavBar, }, }; </script>

Vant UI 的新增组件，需要在 main.js 文件中引入

main.js

import { createApp } from 'vue' import { Button, Tabbar, TabbarItem, Form, Field, Icon, NavBar } from "vant"; import "lib-flexible/flexible"; import App from './App.vue' import router from './router' import "vant/lib/index.css"; // 全局引入样式 import './index.css' // 创建实例 const app = createApp(App) // 注册组件 => 按需注册 app.use(router); app.use(Tabbar); app.use(TabbarItem); app.use(Form); app.use(Field); app.use(Button); // 注册组件 app.use(Icon); app.use(NavBar); // 注册路由 app.use(router) app.mount('#app')

此时，yarn dev，打开浏览器可以看到…

2、测试底部导航栏

./src/views 文件夹下新建一个 Login.vue 组件

<template>登录注册</template> <script> export default { name: "Auth", }; </script>

在 ./src/router/index.js 文件中添加以下路由（导入和配置）

import Login from '../views/Login.vue' ... { path: '/login', component: Login } ...

在 User.vue 中添加跳转到登录注册的路由

User.vue

<template> <Header title="个人中心" /> 个人中心 <router-link to="/login">前往登录注册</router-link> </template> <script> import Header from "../components/Header.vue"; export default { name: "User", components: { Header }, }; </script>

3、公共头部

./components 文件夹中创建 Header.vue 文件

Header.vue

公共头部，详细内容看代码和注释 <template>  <div class="block"></div>   <van-nav-bar class="header" @click-left="back" :title="title" left-text="返回" left-arrow > <template #right>  <i class="iconfont more">...</i> </template> </van-nav-bar> </template> <script> import { useRouter } from "vue-router"; export default { name: "Header", // 传入的 title 变量 props: { title: { type: String, default: "", }, }, setup() { const router = useRouter(); // 点击返回时，返回上一级 const back = () => { router.back(); }; return { back, }; }, }; </script> <style lang="less" scoped> .block { width: 100%; height: 46px; } .header { position: fixed; top: 0; left: 0; width: 100%; .more { font-size: 20px; margin-bottom: 15px; } } </style>

导入头部组件并使用，title 是传给 Header.vue 的名字

Data.vue

<template> <Header title="统计" /> 统计 </template> <script> import Header from "../components/Header.vue"; export default { name: "Data", components: { Header }, }; </script>

Home.vue

<template> <Header title="明细" /> 明细 </template> <script> import Header from "../components/Header.vue"; export default { name: "Home", components: { Header }, }; </script>

User.vue

<template> <Header title="个人中心" /> 个人中心 </template> <script> import Header from "../components/Header.vue"; export default { name: "User", components: { Header }, }; </script>

写到最后（附源码）

看到这么好的项目，是不是有种想自己做出来的冲动？

如果有，那么说明你非常的想提升自己，想检验自己这段时间的学习成果，这个项目绝对是你的不二选择

心动不如行动

那么接下来，一起从0搭建，开始我们基于 Vue3.x + Vant UI 的项目之旅吧~

源码放在了下方的微信公众号里【回复：记账本】即可