Vite-Vue/Vite-Vue-tutorial/src/views/List.vue

<template>
	<div class="list">
		<sidebar v-model="active">
			<sidebar-item
				v-for="item in categories"
				:title="item.name"
				:key="item.id"
				:to="{ name: 'List', query: { tid: item.id } }"
			/>
		</sidebar>
		<!-- @load="onLoad":  当loading和finished同时为false时执行-->
		<list
			class="products"
			:loading="loading"
			:finished="finished"
			@load="onLoad"
			finished-text="没有更多了"
		>
			<card
				v-for="item in products"
				:key="item.id"
				:num="item.amount"
				:price="item.price.toFixed(2)"
				:title="item.name"
				:thumb="dalImageUrl(item.coverImage)"
				@click-thumb="toDetail(item.id)"
			/>
		</list>
	</div>
</template>

<script setup>
import { Sidebar, SidebarItem, Card, List } from "vant";
import { computed } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import { useCategories } from "../hooks/useCategories";
import { dalImageUrl } from "../utils/tools";
import { useProducts } from "../hooks/useProducts";
const route = useRoute();
const router = useRouter();
const { loading, finished, products, currentCategoryId, onLoad } = useProducts(
	route.query.tid
);

// 解构字典中的数据
const { categories } = useCategories();
// 当前选择的分类是哪一个
const active = computed({
	// 设置属性值
	set(v) {
		return v;
	},
	// 获取属性值
	get() {
		return categories.value.findIndex(
			(item) => item.id == currentCategoryId.value
		);
	},
});

// 路由改变时执行(点击不同分类时执行)
onBeforeRouteUpdate((to, from) => {
	//   currentCategoryId.value = to.query.tid;
	// 重新加载数据
	onLoad(true, to.query.tid);
});

const toDetail = (id) => {
	router.push({
		name: "Detail",
		query: {
			id,
		},
	});
};

// loadDataFromServer();
</script>

<style scoped>
.list {
	display: flex;
}

.list .van-sidebar {
	width: 105px;
}

.products {
	overflow: auto;
}
</style>