Vue路由器从路由器函数获取道具

Question

我有一条路线如下：

{
path: '/tabs',
name: 'Tabs',
component: Tabs,
children: [
{
path: 'test/:id',
name: 'Test-View',
component: () => import('@/views/subviews/Test.vue'),
props: (route) => ({ id: route.params.id, label: 'Label from Route' })
},
{
path: 'test-two/:id',
name: 'Test-View-Two',
component: TestTwo,
props: { label: 'Test12' }
}
]
},

以及一个Tabs-组件，该组件从子路由构建选项卡视图：

<template>
<div class="router-tabs">
<div class="tabs">
<router-link v-for="(route, index) in childRoutes" :key="index" class="tab" :to="route">
<span v-if="route.props != undefined && route.props.label">{{ route.props.label }}</span>
<span v-if="route.props == undefined || !route.props.label">No Label</span>
</router-link>
</div>
<router-view />
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component
export default class RouterTabs extends Vue {
public get childRoutes() {
const childRoutes = this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children;
return childRoutes;
}
}
</script>

正如第一个子路由中所述，Props属性是一个函数。如何在我的选项卡组件中获得label-道具？

当前，第一个选项卡/路由的标签总是分别为undefined，并抛出错误。

Answer 1

好的，得到了解决方案。

问题是将Prop字段用于静态值。现在我使用meta-属性来传递信息。

<template>
<div class="router-tabs">
<div class="tabs">
<router-link v-for="(route, index) in childRoutes" :key="index" class="tab" :to="route">
<span v-if="route.meta != undefined && route.meta.label">{{ route.meta.label }}</span>
<span v-if="route.meta == undefined || !route.meta.label">No Label</span>
</router-link>
</div>
<router-view />
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component
export default class RouterTabs extends Vue {
public get childRoutes() {
const childRoutes = this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children;
return childRoutes;
}
}
</script>