整合路由
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>