vue.js 从当前路由获取子项

nfg76nw0  于 2023-03-31  发布在  Vue.js
关注(0)|答案(2)|浏览(202)

我有一个vuejs 2项目,正在寻找一种方法来获取当前路由的子路由(使用typescript)。无论是this.$route还是this.$router.currentRoute都包含children-prop。
有什么办法吗?
有了这些信息,我想存档自动生成选项卡(子视图)。

更新1

好了,获取子路由的解决方案如下:

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

现在的挑战是,从一个子根开始,我首先需要得到父根。有没有什么方法可以同时得到父根和root-Route的子根?
因此,我需要当前路由或父/根路由(如果可用)的所有子路由。

更新2

现在,我提出了以下解决方案:

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

如果有任何更干净/更好的解决方案,请告诉我。

pkwftd7m

pkwftd7m1#

遵循我当前的解决方案:

<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>

可与以下路由配置配合使用:

{
    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' }
        }
    ]
},
brtdzjyr

brtdzjyr2#

我在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
  }

相关问题