编程学习圈（二）整合路由，开发前端页面

整合路由

Vue Router 安装：https://router.vuejs.org/zh/installation.html

npm install vue-router@4

参考文档：https://router.vuejs.org/zh/guide/

• router-link，类似a标签（文档有解释）
• router-view，

参考文档写法定义路由。但为了规范，新建一个文件，定义路由和组件的对应关系。在src目录下创建 config/route.ts，

import * as VueRouter from 'vue-router'
import Index from '../pages/Index.vue'
import Team from '../pages/Team.vue'
import User from '../pages/User.vue'

// 定义一些路由
const routes = [
    { path: '/', component: Index },
    { path: '/team', component: Team },
    { path: '/user', component: User},
  ]


// 创建路由实例并传递 `routes` 配置
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), //路径格式 #的方式
  routes, // 路由数组
})

export default router;

参考文档的写法，修改main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './config/route.ts'


const app = createApp(App);

app.use(router) // 路由

app.mount('#app')

修改 BasicLayout.vue，之前是通过判断 active 的值来加载相应的页面，现在改为路由的方式

vant 组件库自带了和 Vue Router 的整合，所以参考 vant3 文档 Tabbar 路由模式：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tabbar#lu-you-mo-shi

<script setup lang="ts">
// import {ref} from "vue";
const onClickLeft = () => alert('左');
const onClickRight = () => alert('右');

// const active = ref('index');
const onChange = (active: string) => console.log(active);
</script>

<template>
    <van-nav-bar
        title="标题"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
        <template #right>
            <van-icon name="search" size="18"/>
        </template>
    </van-nav-bar>

    <div id="content">
        <router-view></router-view>
    </div>

    <van-tabbar route @change="onChange">
        <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
        <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
        <van-tabbar-item to="/user" icon="friends-o" name="user">我的</van-tabbar-item>
    </van-tabbar>

</template>

<style scoped>
</style>

标签匹配页开发

设计

开发

在 src/pages 下新建TagMatchingPage.vue

在 route.ts 中配置路由

我们需要在点击主页按钮【开始找伙伴】时，跳转到标签匹配页。在 Index.vue 中添加按钮，进行路跳转

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。：https://router.vuejs.org/zh/guide/essentials/navigation.html

<template>
<van-button color="linear-gradient(to right, #1989fa, #824fff)" @click="onClick">
        开始找伙伴吧
    </van-button>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const onClick = () => {
    router.push('/tagmatching')
};
</script>
<style scoped>
</style>

按钮组件：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/button

Tag组件：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tag

引入Tab页组件：https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab

需求：用户在所有标签中选择标签，选中的标签的背景和字体颜色变为选中的样式，同时添加到已选标签中，已选标签可以点×取消选择，也可以在所有标签中再次点击取消选择，最上方有两个按钮，重新选标签，开始找伙伴

<template>

    <van-grid clickable :column-num="2">
        <van-grid-item icon="close" style="color: #ee0a24" text="重新选择标签" @click="clearAllTag"/>
        <van-grid-item icon="smile-o" style="color: #1989fa" text="开始找伙伴" @click="startSearch"/>
    </van-grid>


    <!-- 已选标签 -->
    <div class="selectedDiv">
        <div v-if="selectedTagIds.length === 0" class="positionDiv">请选择标签</div>
        <van-tag
            v-for="id in selectedTagIds" 
            :key=id
            closeable
            @close="close(id)"
            class="tagSelected"
        >
            {{ id }}
        </van-tag>
    </div>


    <!-- 所有标签 -->
    <van-tabs v-model:active="active">
        <van-tab v-for="tag in tagList" :title="tag.text" :name="tag.text" style="margin: 10px 0px 5px 0px;" >
            <div style="margin: 0px 20px;">
                <van-tag
                    round
                    v-for="child in tag.children" 
                    :key = child.id
                    @click="toggleSelect(child.id)"
                    class="tagUnselected"
                    :class="{ 'tagSelected': isSelected(child.id) }"
                >
                    {{ child.text }}
                </van-tag>
            </div> 
        </van-tab>
    </van-tabs>


</template>

<script setup lang="ts">
import { ref } from 'vue';

// 清空所有标签
const clearAllTag = () => {
    selectedTagIds.value = [];
}   

// 关闭标签
const close = (id: string) => {   
    selectedTagIds.value = selectedTagIds.value.filter(tagId => tagId !== id);
};

const active = ref(0);

// 用于存储当前选中的标签 ID 数组
const selectedTagIds = ref<string[]>([]); 

// 判断某个标签是否被选中
const isSelected = (id: string) => {
  return selectedTagIds.value.includes(id);
};

// 切换选中状态的函数
const toggleSelect = (id: string) => {
  if (isSelected(id)) {
    // 如果标签已经选中，则从数组中移除
    selectedTagIds.value = selectedTagIds.value.filter((tagId) => tagId !== id);
  } else {
    // 如果标签未选中，则添加到数组中
    selectedTagIds.value.push(id);
  }
};

const startSearch = () => {
    if(selectedTagIds.value.length === 0){
        alert('请至少选择一个标签')
    }
    // 跳转到搜索结果页面

}
// 标签列表，假数据，数据应来自后端
const tagList = [
    {
        text: '编程语言',
        children: [
            { text: 'Java', id: 'Java' },
            { text: 'Python', id: 'Python' },
            { text: 'C', id: 'C' },
            { text: 'C++', id: 'C++' },
            { text: 'Go', id: 'Go' },
        ],
    },
    {
        text: '性别',
        children: [
            { text: '男', id: '男' },
            { text: '女', id: '女' },
        ],
    },
    {
        text: '年级',
        children: [
            { text: '大一', id: '大一' },
            { text: '大二', id: '大二' },
            { text: '大三', id: '大三' },
            { text: '大四', id: '大四' },
            { text: '大四', id: '大五' },
            { text: '大四', id: '大六' },
            { text: '大四', id: '大7' },
            { text: '大四', id: '大8' },
            { text: '大四', id: '大四9' },
        ],
    },
];

</script>

<style scoped>
.selectedDiv{
    padding: 10px 20px;
    height: 120px;
    max-height: 120px; /* 盒子的最大高度 */
    overflow: auto; /* 添加滚动条，内容超出时显示 */
    background-color: #f9f9f9;
}
.positionDiv{
    font-size: 14px;
    color: #b8babf;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 指定高度，父元素的百分比 */
}

.tagUnselected{
    color: #000000;
    background-color: #f2f3f5;
    margin: 2px 2px 2px 2px;
    padding: 5px 15px;
    border-radius: 14px;
}
.tagSelected{
    color: #FFFFFF;
    background-color: #1989fa;
    margin: 2px 2px 2px 2px;
    padding: 5px 15px;
    border-radius: 14px;
}
</style>

用户页开发

用户信息页

用户信息修改页