vue3 怎么解耦页面的路由关系和布局关系啊

[scienhub]

比如我有几个页面之间的路由是继承关系，但是页面布局毫无关系； 但是有另外两个页面路由不相关，但是布局是类似的。

1. 比如 /:username 和 /project/:priject-id 这两个页面路由没有父子关系，但是页面布局有类似（例如都是左右分栏的）。我希望这两个页面能继承自同一个 layout 文件。
2. 比如/:username 和 /:username/:projectname这两个页面的路由有父子关系，但是页面布局毫无关系。这种情况下用 vue-router 似乎只能共用一个父 layout ？

我看 nextjs 那种基于文件的路由能很好的把 layout 和路由 decouple ，不知道 vue-router 能不能做到这点。

感谢大家！

[bojackhorseman]

https://router.vuejs.org/zh/guide/essentials/nested-routes.html
嵌套路由

[xngiser]

parent component 使用动态组建，根据 router 传递的 layout 值渲染对应的 layout 文件

[Xu3Xan89YsA7oP64]

if-else 秒了

[scienhub]

@xngiser 是啊，现在就是这么干的。导致 root layout 的逻辑很复杂。

[linlai]

刚刚看到你在「大四锐评简历」那个帖子的回复，所以过来咨询一下。
请问还有前端兼职的需求吗？前端相关的我都可以 Cover 。

[he110te4m]

vite 有文件路由的插件，或者换 nuxt 原生支持文件路由