nestedRouteRenderPlugin - 嵌套路由渲染

什么是 nestedRouteRenderPlugin？

nestedRouteRenderPlugin 是一个用于处理嵌套路由渲染的插件，它可以在定义路由时允许不限层级的嵌套，不需要和 router-view 层级对应。

启用插件

import { createRouter, nestedRouteRenderPlugin } from '@pro/router'

const router = createRouter({
  // ... 其他配置
  plugins: [
    nestedRouteRenderPlugin()
  ]
})

在组件中

<template>
  <router-view
    v-slot="{ Component }"
    :route="$router.resolveNestedRoute()"
  >
    <component :is="Component"/>
  </router-view>
</template>

路由配置示例

INFO

在我们的 Admin 中，只写了 2 个 router-view，所以当导航到 '/a/b'、'/a/b/c'、'/a/b/c/d' 时，对应组件会被渲染在写了 $router.resolveNestedRoute() 的 router-view 中

const routes = [
  {
    path: '/a',
    component: A,
    children: [
      {
        path: 'b',
        component: B,
        children: [
          {
            path: 'c',
            component: C,
            children: [
              {
                path: 'd',
                component: D,
              },
            ]
          },
        ]
      },
    ]
  },
]