vue实现查询详情
Vue 实现查询详情功能
查询详情功能通常涉及从列表页跳转到详情页，并显示对应项的详细信息。以下是实现这一功能的几种方法：
使用路由参数传递 ID
在路由配置中定义动态参数，通过 this.$route.params 获取：
// router.js
{
path: '/detail/:id',
name: 'Detail',
component: () => import('./views/Detail.vue')
}列表页通过路由跳转时传递参数：
this.$router.push({ name: 'Detail', params: { id: item.id } })详情页通过 created 或 mounted 钩子获取参数并请求数据：
created() {
const id = this.$route.params.id
this.fetchDetail(id)
}使用 Vuex 状态管理
在 Vuex 中存储当前选中项的 ID 和详情数据：
// store.js
state: {
currentId: null,
detailData: null
},
mutations: {
setCurrentId(state, id) {
state.currentId = id
},
setDetailData(state, data) {
state.detailData = data
}
}列表页触发 mutation 设置当前 ID：
this.$store.commit('setCurrentId', item.id)详情页通过 getter 获取数据：
computed: {
detail() {
return this.$store.state.detailData
}
}使用事件总线传递数据
创建全局事件总线：
// main.js
Vue.prototype.$eventBus = new Vue()列表页触发事件：
this.$eventBus.$emit('show-detail', item)详情页监听事件：
mounted() {
this.$eventBus.$on('show-detail', item => {
this.detailData = item
})
}使用 Props 传递数据
如果详情页是列表页的子组件，可以通过 props 直接传递数据：
// Parent.vue
<Detail :item="selectedItem" />
// Detail.vue
props: {
item: {
type: Object,
required: true
}
}注意事项
- 路由方式适合独立页面间的跳转
- Vuex 适合复杂应用的状态管理
- 事件总线适合简单组件间的通信
- Props 适合父子组件间的数据传递
- 确保在组件销毁时取消事件监听，避免内存泄漏
