element plus的一个组件使用小问题求教

sxfxtf

官网地址:https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes
有大佬用过这个功能吗?

[HTML] 纯文本查看 复制代码

<el-menu :collapse="isCollapse" @open="handleOpen" @close="handleClose" unique-opened router
                    style="height: 100vh; width: 100%;" default-active="1">
                    <el-sub-menu v-for="(value, index) in params.router_lists" :key="value.name" :index="`${index}`">
                        <template #title>
                            <el-icon>
                                <FullScreen />
                            </el-icon>
                            <span>{{ $t(value.meta.title) }}</span>
                        </template>
                        <el-menu-item v-for="(item, child_index) in value.children" :key="child_index"
                            :route="{ name: item.name }">
                            {{ $t(item.meta.title) }}
                            <!-- Debug: 输出name以确保其有效 -->
                            <!-- <div>{{ item.name }}</div> -->
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>

这个是我自己写的静态路由,赋值给了变量params.router_lists

[JavaScript] 纯文本查看 复制代码

[
    {
        "path": "/setup/",
        "name": "setup",
        "meta": {
            "title": "navi_left.permission_setup",
            "keepAlive": true,
            "father": true,
            "icon": "School"
        },
        "props": {
            "default": false
        },
        "children": [
            {
                "path": "departement/",
                "meta": {
                    "title": "navi_left.department",
                    "keepAlive": true,
                    "icon": "School"
                },
                "name": "DeparteMent1",
                "hidden": true
            },
            {
                "path": "user/",
                "meta": {
                    "title": "navi_left.usermanage",
                    "keepAlive": true,
                    "icon": "School"
                },
                "name": "User1",
                "hidden": false
            },
            {
                "path": "menu/",
                "meta": {
                    "title": "navi_left.menumanage",
                    "keepAlive": true,
                    "icon": "School"
                },
                "name": "Menu1",
                "hidden": false
            }
        ],
        "instances": {
            "default": {}
        },
        "leaveGuards": {},
        "updateGuards": {},
        "enterCallbacks": {},
        
    },
    {
        "path": "/vul/",
        "name": "Vul",
        "meta": {
            "title": "navi_left.vul",
            "keepAlive": true,
            "father": true,
            "icon": "School"
        },
        "props": {
            "default": false
        },
        "children": [
            {
                "path": "vulinfo/",
                "meta": {
                    "title": "navi_left.vul_info",
                    "keepAlive": true,
                    "icon": "School"
                },
                "name": "VulInfo1",
                "hidden": false
            },
            {
                "path": "vulaudit/",
                "meta": {
                    "title": "navi_left.vul_audit",
                    "keepAlive": true,
                    "icon": "School"
                },
                "name": "VulAudit1",
                "hidden": false
            }
        ],
       
    }
]

现在就是页面可以正常显示,但是点击路由跳转就没办法按路由name信息跳转

zxwl666

抱歉，我是后端，但是报错、有事甩给ai

身无分文爱装逼

静态路由是不是缺少了 component

CCCCCran

路由文件缺少了对应的组件引入把

markChenZhiWei

一看就是缺少 component 属性，

li19980414

<el-menu router>

你在这里给了router  `是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。`

跳转的时候用 path 去跳了

li19980414

去掉el-menu上定义的router   试试

BrightXu

或者自己实现一个吧，简洁有好用

sxfxtf

li19980414 发表于 2024-11-14 11:29
你在这里给了router  `是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行 ...

所以跳转只能用path  不能用name跳是吧

sxfxtf

li19980414 发表于 2024-11-14 11:39
去掉el-menu上定义的router   试试

router和route是不同的参数,router表示总开关  只有router开启  才能用route