Vue3+Vant开发：个人信息管理

程序员老茶

已于 2024-04-23 13:11:20 修改

阅读量1.4k

点赞数 10

分类专栏：前端 # Vue 文章标签：前端 javascript vue.js

于 2024-04-18 16:36:58 首次发布

本文链接：https://blog.csdn.net/qq_53431712/article/details/137926543

版权

本文介绍了使用Vue3和Vant框架开发个人信息管理页面的过程，包括TabBar处理、未登录和已登录布局实现、宫格导航、消息通知、退出登录等功能。通过组件化和路由策略优化页面性能，详细讲解了每个步骤的实现细节和代码实现。

摘要由CSDN通过智能技术生成

🙈作者简介：练习时长两年半的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-direction: column;
  justify-content: center;
  align-items: center;
}
.mobile-img {
  width: 132px;
  height: 132px;
  margin-bottom: 15px;
}
.text {
  font-size: 28px;
  color: #fff;
}
</style>

在上面的代码中，设置了基本的布局和对应的css样式。

到单击图标的时候，跳转到登录页面。

但是，这里当我们单击了图标，跳转到登录页面以后，又不想登录了，想返回上一页。

下面，返回到/login/index.vue文件

 <!-- 导航栏 -->
    <van-nav-bar title="登录" class="page-nav-bar">
      <template #left>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>

在导航栏中，使用了插槽，定义左侧的图标，为cross图标。

这里参考文档实现：