路由组件传参

# 布尔模式

当 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

<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

上次更新: 2024/08/14, 04:14:33

← 动态路由组件实例→