从当前路由获取子路由

Question

我有一个vuejs 2项目，正在寻找一种方法来获取当前路由的子节点(使用typescript)。this.$route和this.$router.currentRoute是否包含children-prop

有什么办法吗?

有了这些信息，我想存档以自动生成选项卡(子视图)。

<标题>

更新1好的，获取子路由的解决方案如下:

this.$router.options.routes?.find((route) => route.name === this.$route.name)?.children

现在的挑战是，我首先需要从子根得到父根。有没有办法也得到父分别得到root-路由的子?

所以我需要当前或可用的父/根路由的所有子路由。

<标题>更新2 h1> 的，我目前想出了以下解决方案:

this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children

如果有更干净/更好的解决办法请告诉我。

Answer 1

按照我目前的解决方案:

<template>
<div class="router-tabs">
<div class="tabs">
<router-link v-for="(route, index) in childRoutes" :key="index" class="tab" :to="route">
{{ route.props.label }}
</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() {
return this.$router.options.routes?.find((route) => route.name === this.$route.name || route.children?.find((child) => child.name === this.$route.name))?.children;
}
}
</script>

与下面的route-config一起工作:

{
path: '/tabs',
name: 'Tabs',
component: Tabs,
children: [
{

path: 'test',
name: 'Test-View',
component: Test,
props: { label: 'Test' }
},
{
path: 'test-two',
name: 'Test-View-Two',
component: TestTwo,
props: { label: 'Test12' }
}
]
},

Answer 2

我在Vue 3中这样做是为了获取某个菜单项的子路由:

import { useRoute, useRouter } from 'vue-router'
const $route = useRoute()
const $router = useRouter()
function getChildRoutes() {
const routes = $router.options.routes
const route = routes.find(item => item.path.split('/')[1] === $route.path.split('/')[1])
let childRoutes = []
if (route.children) {
childRoutes = route.children
.filter(r => r.path && !r.path.startsWith(':'))
.map(r => ({name: r.name, href: route.path + '/' + r.path}))
}
return childRoutes
}