【金秋打卡】第12天 全新升级，基于Vue3最新标准，打造后台综合解决方案之获取展示数据

课程名称：全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节：7-21业务落地：获取展示数据

课程讲师：Sunday

课程内容：

目标： 获取用户详情的展示数据

核心点：将props传递给路由组件

实现步骤：

1. 在api/user-manage 中定义获取用户详情接口

/**
 * 获取用户详情
 */
export const userDetail = (id) => {
  return request({
    url: `/user-manage/detail/${id}`
  })
}

2. 在 views/user-info 中根据 id 获取接口详情数据，并进行国际化处理

ews/user-info 中根据 id 获取接口详情数据，并进行国际化处理
import {userDetail} from '@/api/user-manage'
import {watchSwitchLang} from '@/utils/i18n'
import {defineProps,ref} from 'vue'

const props=defineProps({
   id:{
       type:String,
       required:true    
   }
})

// 数据相关
const detailData=ref({})
const getUserDetail=async()={
   detailData.value=await userDetail(props.id)
}
getUserDetail()
// 语言切换
watchSwitchLang(getUserDetail)

3. 因为用户详情可以会以组件的形式进行呈现，所以对于此处我们需要得到的id ，可以通过 vue-router Props 传参 的形式进行

4. 指定路由表

{
    path:'/user/info/:id',
    name:'userInfo',
    component:()=>import('@/views/user-info/index'),
    props:true,
    meta:{
        title:'userInfo'    
    }
    
}

5. 在views/user-manage 中传递用户 id

<el-button
    type="primary"
    size="mini"
    @click="onShowClick(row._id)"
>
{{ $t('msg.excel.show') }}
</el-button>

/**
 * 查看按钮点击事件
 */
const onShowClick = id => {
  router.push(`/user/info/${id}`)
}

课程收获：

谢谢老师，讲的非常细致，很容易懂。这一节学的是获取用户详情的数据。核心点在于将props传递给路由组件。这样作为组件去传参的时候就会自动回去那个后面的porps的值会和路由的参数解耦 router/index.js 员工详情的信息的信息有时候会以页面的形式展示，有时候会以弹窗的组件的形式现实，在参数中指定props为true，通过路由传递过来的数据会被props进行接收。将props传递给路由组件  不会让userinfo和传递过来的参数产生一个强绑定的关系.通过props传参可以让我们的组件和路由进行解耦

课程截图：