路由组件传参
# 布尔模式
当 props 设置为 true 时，route.params 将被设置为组件的 props。
此方式让该页面以组件或页面形式展示
{
path: '/user/info/:id',
name: 'userInfo',
component: () => import('@/views/user-info/index'),
props: true,
meta: {
title: 'userInfo'
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<script setup>
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)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
上次更新: 2025/06/23, 07:26:12