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>

		<div class="products">
			<card
				v-for="item in products"
				:key="item.id"
				:num="item.amount"
				:price="item.price.toFixed(2)"
				:title="item.name"
				:thumb="dalImageUrl(item.coverImage)"
			/>
		</div>
	</div>
</template>

<script setup>
import { Sidebar, SidebarItem, Card } from "vant";
import { ref, computed } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
import { useCategories } from "../hooks/useCategories";
import { useRoute } from "vue-router";
import { loadProductAPI } from "../services/products";
import { dalImageUrl } from "../utils/tools";

const route = useRoute();

// 当前分类
const currentCategoryId = ref(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;
	loadDataFromServer();
});

// 获取对应分类的商品
const products = ref([]);

const loadDataFromServer = () => {
	loadProductAPI(1, currentCategoryId.value).then((res) => {
		products.value = res.data;
	});
};

loadDataFromServer();
</script>

<style scoped>
.list {
	display: flex;
}
.list .van-sidebar {
	width: 105px;
}
.products {
	overflow: auto;
}
</style>