[Vue]routerview写死渲染成功，动态就渲染失败？

Z时代
2024-02-11
分类：IT

使用的版本是Vue3

背景介绍

[Vue]routerview写死渲染成功，动态就渲染失败？
我希望为我的路由home动态添加子路由
并通过点击侧栏菜单实现对router-view的渲染

问题综述

在图1写死的例子中，可以正确渲染router-view
[Vue]routerview写死渲染成功，动态就渲染失败？

但是在我写的动态生成的子路由则不能
虽然组件能显示，但是会跳转到一个新页面，而不是在HomeView2组件中被渲染

这是我的动态生成子路由的js代码

export const doFormat=function(unFormatRoutes, parentName, router){
    unFormatRoutes.forEach(route => {                
        if(route.name == '所有'){
            return
        }
        let{                    //对应key-value地接收后端JSON中的数据
            path,
            component,
            name,
            meta,
            enabled,
            icon,
            children
        } = route
        if(children && children instanceof Array){    //如果当前的route对象有子菜单，则子菜单递归格式化
            component: () => import('@/views/HomeViewExample.vue');  //先给父路由声明一个随意有效的临时组件，以免addRoute失败
router.addRoute(route);
            children = doFormat(children, name, router);
        }
        var myComponent = () => import('@/components/user/UserList.vue')  //先写死，如果成功渲染就改为动态
        let fmtRoute={
            path: path,                                
            name: name,
            icon: icon,
            meta: meta,
            hidden: !enabled,
            children: children,
            component: myComponent
        }
        rtnFmtRoutes.push(fmtRoute)
        if(!parentName){
            router.addRoute(fmtRoute)                //父路由
        }else{
            router.addRoute(parentName,fmtRoute)    //子路由
        }
    })}