0

我有一个页面，使用命名视图<router-view/>同时显示多个页面。

这很好用，但是我还需要向每个视图添加子级，但不知道如何做到这一点。

这是有关我的布局的更多详细信息。

vue主要组件：

<template>
    <div>
        <router-view name="files"/>
        <router-view name="forms"/>
        <router-view name="tools"/>
    </div>
</template>
...

路由器：

let router = new Router({
                path: ':resourceTab',
                name: 'Resources',
                components: {
                    files: FilesMain,
                    forms: FormsList,
                    tools: ToolsList,
                },
                props: true,
            })

new Vue({
    el: '#app',
    router: router,
    store,
    render: h => h(App)
})

这是我想要完成的事情：

           {
                path: ':resourceTab',
                name: 'Resources',
                components: {
                    files: {component: FilesMain, children: [{path: file/:fileId}] <- Just made up this syntax to show the idea. How to accomplish something like this?
                    forms: FormsList,
                    tools: ToolsList,
                },
                props: true,
            }

目前我通过添加更多类似下面的路径来做到这一点，但这只会产生冗余，我必须每次都传递“resourceTab”的值：

       {
            path: 'files',
            name: 'Resources',
            components: {files: FilesMain},
            children:[{path: file/:fileId}]
            props () => {resourceTab: "files"},
        },
       {
            path: 'forms',
            name: 'Resources',
            components: {forms: FormsList},
            children:[{path: forms/:formId}]
            props () => {resourceTab: "forms"},
        }

        ...etc

在这种动态布局中组织子视图有更好的方法吗？

4

0 回答 0