从列表页到详情页：手把手教你用Vue 3 + Router实现动态路由与参数传递（完整项目片段）

从列表页到详情页Vue 3动态路由实战指南在单页应用开发中列表到详情的跳转是最常见也最核心的交互模式之一。想象这样一个场景你正在开发一个电商后台系统商品列表中的每个卡片都需要点击后展示完整详情。传统多页应用会直接跳转新页面但在Vue生态中我们可以通过动态路由实现更优雅的无刷新体验。本文将带你从零实现一个包含参数传递、数据加载的完整流程特别针对Vue 3的Composition API进行优化设计。1. 项目初始化与路由配置首先确保已创建Vue 3项目并安装最新版Vue Routernpm install vue-router4在src/router/index.js中配置基础路由结构。动态路由的核心是在路径中使用冒号标记参数import { createRouter, createWebHistory } from vue-router const routes [ { path: /products, name: ProductList, component: () import(../views/ProductList.vue) }, { path: /products/:id, // 动态段以冒号开头 name: ProductDetail, component: () import(../views/ProductDetail.vue), props: true // 启用props解耦 } ] const router createRouter({ history: createWebHistory(), routes }) export default router关键配置说明配置项作用说明推荐值dynamic segment定义可变的路径部分:idprops将参数作为组件props接收truehistory mode保持URL清洁避免hashcreateWebHistory提示启用props: true后路由参数会以props形式传递给组件这是比直接访问route更解耦的做法2. 列表页跳转逻辑实现在列表组件中我们通常需要处理两种跳转方式script setup import { useRouter } from vue-router const router useRouter() const products ref([ { id: 101, name: 智能手表, price: 899 }, { id: 102, name: 无线耳机, price: 499 } ]) // 方法1直接传递路径 const navigateByPath (id) { router.push(/products/${id}) } // 方法2使用命名路由推荐 const navigateByName (product) { router.push({ name: ProductDetail, params: { id: product.id }, query: { from: list } // 可同时携带查询参数 }) } /script template ul li v-forproduct in products :keyproduct.id h3{{ product.name }}/h3 p¥{{ product.price }}/p !-- 两种跳转方式任选 -- button clicknavigateByName(product)查看详情/button /li /ul /template跳转方式对比路径跳转优点直观简单缺点硬编码路径重构困难命名路由优点通过name引用路径变更不影响逻辑建议中大型项目首选3. 详情页参数接收与数据加载详情页需要完成三个关键任务获取路由参数根据ID加载数据处理加载状态和错误script setup import { ref, onMounted } from vue import { useRoute } from vue-router import api from /api const props defineProps([id]) // 通过props接收参数 const route useRoute() // 备用方案 const product ref(null) const loading ref(false) const error ref(null) // 组合式函数封装数据加载逻辑 const fetchProduct async (id) { try { loading.value true const response await api.getProduct(id) product.value response.data } catch (err) { error.value err.message } finally { loading.value false } } onMounted(() { // 优先使用props.id其次使用route.params.id const targetId props.id || route.params.id if (targetId) fetchProduct(targetId) }) /script template div v-ifloading加载中.../div div v-else-iferror classerror{{ error }}/div div v-else-ifproduct classdetail h1{{ product.name }}/h1 div classmeta span产品ID: {{ product.id }}/span span价格: ¥{{ product.price }}/span /div p{{ product.description }}/p /div /template注意始终考虑参数不存在的情况添加适当的验证逻辑可以避免页面崩溃4. 高级技巧与性能优化4.1 路由守卫数据预加载在进入详情页前预先加载数据// router/index.js router.beforeEach(async (to) { if (to.name ProductDetail) { const id to.params.id try { await store.dispatch(fetchProduct, id) } catch (error) { return /404 // 跳转到错误页 } } })4.2 滚动行为控制让详情页返回列表时保持原先的滚动位置const router createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } } })4.3 组件级数据缓存使用keep-alive缓存列表页状态!-- App.vue -- router-view v-slot{ Component } keep-alive component :isComponent v-if$route.meta.keepAlive / /keep-alive component :isComponent v-if!$route.meta.keepAlive / /router-view路由配置中添加meta字段{ path: /products, name: ProductList, component: () import(../views/ProductList.vue), meta: { keepAlive: true } }5. 常见问题解决方案问题1刷新页面后参数丢失原因动态路由参数需要配合数据持久化解决方案// 在详情页添加参数验证 onMounted(() { if (!props.id !route.params.id) { router.push(/products) // 退回列表页 } })问题2相同路由参数变化不触发更新解决方案监听路由变化watch( () route.params.id, (newId) { if (newId) fetchProduct(newId) } )问题3SEO不友好解决方案使用SSR框架如Nuxt.js添加静态meta信息useHead({ title: product.value?.name || 产品详情, meta: [ { name: description, content: product.value?.description || } ] })在最近的一个后台管理系统项目中我们采用了命名路由props解耦的方案。当产品需求变更导致URL结构调整时只需修改路由配置而无需变动组件代码这大大降低了维护成本。特别是在团队协作中这种约定优于配置的方式让接口定义更加清晰。