504 Star 7.3K Fork 2.1K

lyt-Top / vue-next-admin

 / 详情

关于菜单管理中组件路径字段的两个疑问

已完成
创建于  
2023-03-04 22:54

第一个

这是我后台数据库中的数据:

输入图片说明

但在前端展示后莫名多了个参数:

输入图片说明

第二个

由于经过backEndComponent方法逻辑处理后,组件路径由string变成了一个function,点击修改按钮将row传入进dialog.vue,浏览器会报警告:

输入图片说明

评论 (6)

hanjinfeng39 创建了任务

关于第二个疑问是不是要把组件路径从Function再转换回String呢?

1. 加一个字段别名 componentAliascomponent 内容一致,显示使用 componentAlias

2. 或者取 /src/stores/requestOldRoutes.ts 里的数据,它在 /src/router/backEnd.ts 中使用。

3. 此代码只有本地开发时有用

// 递归处理 component 成字符串
// 后端菜单格式参考:https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu
const changeComponent = (arr: RouteRecordRaw[]) => {
    const targetArr: RouteRecordRaw[] = [];
    arr.forEach((row: RouteRecordRaw) => {
        const itemMatch = `${row.component}`.match(/\/src\/(\S*).vue/);
        row['componentAlias'] = itemMatch && itemMatch[1].replace(/views\//, '');
        targetArr.push({ ...row });
            if (row.children) changeComponent(row.children);
    });
    return targetArr;
};

// 调用 `changeComponent` 方法

// 获取路由数据,真实请从接口获取
const getTableData = () => {
    state.tableData.loading = true;
    state.tableData.data = changeComponent(routesList.value);
    setTimeout(() => {
        state.tableData.loading = false;
    }, 500);
};
7783837 lyt top 1625394353 lyt-Top 拥有者
回复 lyt-Top 拥有者

纯前端做不了,因为打包之后(线上)的 component 与 本地开发(本地)的 component 引入不一致。

  • 感谢,我采用了多一个字段的方式。

  • 但现在就是路由组件会莫名多个t的参数,这可能是什么原因引起的呢?原谅我目前对ts不是很熟悉。

那个是打包后的吧?应该是防止缓存用的

可我没打包,我就正常启动项目,整合我的后端出现的这种情况。不管了,也不影响,感谢作者

hanjinfeng39 任务状态待办的 修改为已完成

登录 后才可以发表评论

状态
负责人
里程碑
Pull Requests
关联的 Pull Requests 被合并后可能会关闭此 issue
分支
开始日期   -   截止日期
-
置顶选项
优先级
参与者(2)
7783837 lyt top 1625394353
TypeScript
1
https://gitee.com/lyt-top/vue-next-admin.git
git@gitee.com:lyt-top/vue-next-admin.git
lyt-top
vue-next-admin
vue-next-admin

搜索帮助

14c37bed 8189591 565d56ea 8189591