🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：Java

这里，我们主要实现个人信息的展示，以及实现个人信息管理的页面布局实现

1、TabBar处理

在个人信息管理页面的底部，我们发现有一组“标签导航栏”。

而且这一组“标签导航栏”在每个页面中都有。

那么我们应该怎样处理呢？
第一种方案：在每个页面中都创建一遍，但是这种做法比较麻烦，所以不建议这样做。

第二种方案：将其单独的封装成一个 组件，这样每个页面中需要标签导航栏的时候，直接使用该组件就可以了。但是，这里我们也不建议这样做，因为，当我们切换到不同的页面的时候，这个组件都会重新被渲染加载，这样就会影响性能。

第三种方式：我们做一个父路由，把底部的标签导航栏放在父路由中，同时在父路由中留一个路由的出口。对应的其它页面都都渲染到这个路由出口的位置。这样，当我们进行页面的切换的时候，就不需要重新加载底部的“导航栏”了

在views目录下面创建layout目前，同时在该目录下面创建index.vue文件，该文件中的代码如下所示：

在下面代码中，先来指定子路由的出口，后面在对标签导航栏进行设置

<template><div class="layout-container"><!-- 子路由的出口 --><router-view></router-view><!-- 标签导航栏 --></div>
</template><script>
export default {};
</script><style></style>

配置路由规则：

const routes = [{path: "/login",name: "login",component: () => import("../views/login/index.vue"),},{ //配置路由path: "/",name: "layout",component: () => import("../views/layout/index.vue"),},
];

下面，我们返回到index.vue页面，开始制作底部的标签导航栏

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tabbar

<template><div class="layout-container"><!-- 子路由的出口 --><router-view></router-view><!-- 标签导航栏 --><van-tabbar v-model="active"><van-tabbar-item icon="home-o">标签</van-tabbar-item><van-tabbar-item icon="search">标签</van-tabbar-item><van-tabbar-item icon="friends-o">标签</van-tabbar-item><van-tabbar-item icon="setting-o">标签</van-tabbar-item></van-tabbar></div>
</template><script>
import { ref } from "vue";
export default {setup() {const active = ref(0);return {active,};},
};
</script><style></style>

在上面的代码中，我们直接把官方文档中的tabbar组件，拿过来了。v-model的取值为active,而active这个对象的默认值为0，也就是让人第一项导航栏进行选中。icon属性表示的就是导航栏中每一项的图标，下面把文字修改一下：

   <van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">问答</van-tabbar-item><van-tabbar-item icon="friends-o">视频</van-tabbar-item><van-tabbar-item icon="setting-o">我的</van-tabbar-item>

下面把视频与我的图标更换一下：

<van-tabbar v-model="active"><van-tabbar-item icon="home-o">首页</van-tabbar-item><van-tabbar-item icon="search">问答</van-tabbar-item><van-tabbar-item icon="video-o">视频</van-tabbar-item><van-tabbar-item icon="contact">我的</van-tabbar-item></van-tabbar>

这里我们还是使用的vant中提供好的一些图标，当然这里我们也可以使用自定义图标，在官方文档中也已经明确的告诉我们怎样使用自定义图标了。

下面，我们要实现的就是，单击不同的项，展示出各自对应的页面。

首先在views目录中，创建对应的文件夹与文件。

创建home文件夹，在该文件夹中创建index.vue文件,表示首页，该文件的初步内容为：

<template><div>Home Page</div>
</template><script>
export default {};
</script><style></style>

my/index.vue

<template><div>我 的</div>
</template><script>
export default {};
</script><style></style>

video/index.vue

<template><div>视频</div>
</template><script>
export default {};
</script><style></style>

qa/index.vue

<template><div>问答</div>
</template><script>
export default {};
</script><style></style>

初步的页面创建好以后，下面需要配置对应的子路由了。router/index.js设置路由

{path: "/",name: "layout",component: () => import("../views/layout/index.vue"),children: [{path: "", //默认子路由(默认展示home页面)，只能有一个name: "home",component: () => import("../views/home/index.vue"),},{path: "/qa",name: "qa",component: () => import("../views/qa/index.vue"),},{path: "/video",name: "video",component: () => import("../views/video/index.vue"),},{path: "/my",name: "my",component: () => import("../views/my/index.vue"),},],},

在值的路由中，最开始设置了默认子路由。

下面返回到浏览器中，进行测试，发现默认展示的就是home组件中的内容，但是当我们单击tabbar中的每一项的时候，还没有进行切换。

原因是，这里我们需要给tabbar开启路由功能。

返回到views/layout/index.vue页面中。

  <van-tabbar route v-model="active"><van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item><van-tabbar-item icon="search" to="/qa">问答</van-tabbar-item><van-tabbar-item icon="video-o" to="/video">视频</van-tabbar-item><van-tabbar-item icon="contact" to="/my">我的</van-tabbar-item></van-tabbar>

第一步：给tabber组件添加了route属性，表示开启了路由的模式

第二步：给每个tabbar-item添加了to属性，指定了对应的路由地址、

这时候，可以发现浏览器进行测试。

2、未登录布局实现

下面修改views/my/index.vue文件中的代码，代码如下所示：

<template><div class="my-container"><div class="header not-login"><div class="login-btn" @click="this.$router.push('/login')"><img class="mobile-img" src="../../assets/mobile.png" alt="" /><span class="text">注册 / 登录</span></div></div></div>
</template><script>
export default {};
</script><style>
.my-container .header {height: 361px; background: url("../../assets/banner.png");background-size: cover;
}
.my-container .not-login { /* 没有登录的效果样式*/display: flex;justify-content: center;align-items: center;
}
.my-container .not-login .login-btn {display: flex;flex-di