nh-uniapp/plugin/uni-simple-router/vueRouter/util.js

import { warn, err } from '../helpers/warn';
import { isObject, resolveRule, copyObject } from '../helpers/util';
import { proxyBeforeEnter } from './proxy/proxy';
import { Global } from '../helpers/config';

const pagesConfigReg = /props:\s*\(.*\)\s*(\([\s\S]*\))\s*},/;
const pagesConfigRegCli = /props:\s*Object\.assign\s*(\([\s\S]*\))\s*},/; // 脚手架项目
const defRoutersReg = /props:\s*{([\s\S]+)}\s*},/;

/**
 * 解析验证当前的 component 选项是否配置正确 只有vueRouterDev:false 才会调用此方法
 * @param {Function|Object} component
 * @param {Object} item
 * @param {Boolean} useUniConfig
 */
export const resolveRender = function ({
    component,
    components,
}, item, useUniConfig) {
    if (components != null) {
        warn(`vueRouterDev:false时 路由表配置中 ‘components’ 无效，\r\n\r\n ${JSON.stringify(item)}`);
    }
    if (useUniConfig == true) { // 采用uni-pages.json中的配置时component可以为空
        return false;
    }
    if (item.path == '*') { // 唯独这个情况在vue-router中可以不用component
        return true;
    }
    if (component == null) {
        return err(`vueRouterDev:false时 路由表中 ‘component’ 选项不能为空：\r\n\r\n ${JSON.stringify(item)}`);
    }
    if (component.constructor === Function) {
        item.component = {
            render: component,
        };
    } else if (component.constructor === Object) {
        if (component.render == null || component.render.constructor !== Function) {
            err(`vueRouterDev:false时 路由表配置中 ‘render’ 函数缺失或类型不正确：\r\n\r\n ${JSON.stringify(item)}`);
        }
    } else {
        err(
            `vueRouterDev:false时 路由表配置中 ‘component’ 选项仅支持 Function、Object 类型。并确保 Object 类型时传递了 ‘render’ 函数  ：\r\n\r\n ${JSON.stringify(item)}`,
        );
    }
};
/**
 * 递归解析 H5配置中有存在嵌套对象的情况,优先以path为key存储。没有则找aliasPath作为key
 * @param {Object} objRoutes
 * @param {Array} children
 * @param {Boolean} useUniConfig 是否使用pages.json下的页面配置
 */
export const resloveChildrenPath = function (objRoutes, children, useUniConfig) {
    for (let i = 0; i < children.length; i += 1) {
        const item = children[i];
        resolveRender(item, item, useUniConfig);
        if (item.path != null) {
            objRoutes[item.path] = {
                ...item,
                ...{
                    _ROUTERPATH: true, // 使用page.json中的path为路径
                },
            };
        } else {
            objRoutes[item.aliasPath] = {
                ...item,
                ...{
                    _ROUTERPATH: false,
                },
            };
        }
        if (item.children && item.children.constructor === Array) {
            resloveChildrenPath(objRoutes, item.children, useUniConfig);
        }
    }
};
/**
 * 格式化原始路由表
 * @param {Object} routes  路由表
 * @param {Boolean} userRoute  是否为用户自己配置的路由表
 * @param {Boolean} H5CONFIG
 */
export const fromatRoutes = function (routes, userRoute, {
    vueRouterDev,
    useUniConfig,
}) {
    if (userRoute && vueRouterDev) { // 如果是用户的路由表并且 完全采用vueRouter开发 则不作处理直接返回
        return routes;
    }
    const objRoutes = {};
    for (let i = 0; i < routes.length; i += 1) {
        const item = routes[i];
        const path = item.path === '/' ? item.alias : item.path;
        if (userRoute) {
            if (item.children && item.children.constructor === Array) {
                resloveChildrenPath(objRoutes, item.children, useUniConfig);
            }
            resolveRender(item, item, useUniConfig); // 是否使用pages.json下的页面配置
        }
        objRoutes[path] = {
            ...item,
            ...{
                _PAGEPATH: path.substring(1),
            },
        };
    }
    return objRoutes;
};

/**
 * 解析vueRouter中 component 下 render函数中的配置信息
 * @param {String} FunStr
 */
export const getFuntionConfig = function (FunStr) {
    let matchText = FunStr.match(pagesConfigReg);
    let prefix = '';
    if (matchText == null) { // 是uni-app自带的默认路由及配置 也可能是脚手架项目
        matchText = FunStr.match(pagesConfigRegCli);
        if (matchText == null) { // 确认不是脚手架项目
            try {
                // eslint-disable-next-line
                matchText = FunStr.match(defRoutersReg)[1];
                // eslint-disable-next-line
                matchText = eval(`Object.assign({${matchText}})`);
                prefix = 'system-';
            } catch (error) {
                err(`读取uni-app页面构建方法配置错误 \r\n\r\n ${error}`);
            }
        } else {
            // eslint-disable-next-line
            matchText = eval(`Object.assign${matchText[1]}`);
        }
    } else {
        // eslint-disable-next-line
        matchText = eval(`Object.assign${matchText[1]}`);
    }
    return {
        config: matchText,
        prefix,
        FunStr,
    };
};
/**
 * 通过一个未知的路径名称 在路由表中查找指定路由表 并返回
 * @param {String} path //不管是aliasPath名的路径还是path名的路径
 * @param {Object} routes//当前对象的所有路由表
 */
export const pathToRute = function (path, routes) {
    let PATHKEY = '';
    let rute = {};
    const routeKeys = Object.keys(routes);
    for (let i = 0; i < routeKeys.length; i += 1) {
        const key = routeKeys[i];
        const item = routes[key];
        rute = item;
        if (item.aliasPath == path) { // path参数是优先采用aliasPath为值得 所以可以先判断是否与aliasPath相同
            PATHKEY = 'aliasPath';
            break;
        }
        // eslint-disable-next-line
        if (`/${item._PAGEPATH}` == path) { // 路径相同
            PATHKEY = 'path';
            break;
        }
    }
    return {
        PATHKEY: {
            [PATHKEY]: path,
        },
        rute,
    };
};
/**
 * 通过一个路径name 在路由表中查找指定路由表 并返回
 * @param {String} name//实例化路由时传递的路径表中所匹配的对应路由name
 * @param {Object} routes//当前对象的所有路由表
 */
export const nameToRute = function (name, routes) {
    const routesKeys = Object.keys(routes);
    for (let i = 0; i < routesKeys.length; i += 1) {
        const key = routesKeys[i];
        const item = routes[key];
        if (item.name == name) {
            return item;
        }
    }

    err(`路由表中没有找到 name为:'${name}' 的路由`);
};
/**
 * 根据用户传入的路由规则 格式化成正确的路由规则
 * @param {Object} rule 用户需要跳转的路由规则
 * @param {Object} selfRoutes simple-router下的所有routes对象
 * @param {Object} CONFIG 当前路由下的所有配置信息
 */
export const formatUserRule = function (rule, selfRoutes, CONFIG) {
    let type = '';
    const ruleQuery = (type = 'query', rule.query || (type = 'params', rule.params)) || (type = '', {});
    let rute = {}; // 默认在router中的配置
    if (type == '' && rule.name != null) { // 那就是可能没有穿任何值咯
        type = 'params';
    }
    if (type != 'params') {
        const route = pathToRute(rule.path || rule, selfRoutes);
        if (Object.keys(route.PATHKEY)[0] == '') {
            err(`'${route.PATHKEY['']}' 路径在路由表中未找到`);
            return null;
        }
        rute = route.rute;
        if (rule.path) {
            rule.path = rute.path;
        }
    }
    if (type != '') { // 当然是对象啦 这个主要是首页H5PushTo调用时的
        if (type == 'params' && CONFIG.h5.paramsToQuery) { // 如果是name规则并且设置了转query,那么就转path跳转了
            const {
                aliasPath,
                path,
            } = nameToRute(rule.name, selfRoutes);
            delete rule.name;
            delete rule.params;
            rule.path = aliasPath || path;
            type = 'query';
        }
        const query = Global.$parseQuery.transfer(ruleQuery);
        if (CONFIG.encodeURI) {
            if (query != '') {
                rule[type] = {
                    query: query.replace(/^query=/, ''),
                };
            }
        } else {
            rule[type] = ruleQuery;
        }
    } else { // 纯字符串,那就只有是path啦
        rule = rute.path;
    }
    return rule;
};

/**
 * 根据是否获取非vue-Router next管道参数，来进行格式化
 *
 * @param {Object} to
 * @param {Object} from
 * @param {Router} Router  //router当前实例对象
 */
export const getRouterNextInfo = function (to, from, Router) {
    let [toRoute, fromRoute] = [to, from];
    const H5 = Router.CONFIG.h5;
    if (H5.vueNext === false && H5.vueRouterDev === false) { // 不采用vue-router中的to和from,需要格式化成Router中$Route获取的一样一样的
        let [toPath, fromPath] = [{}, {}];
        toPath[to.meta.PATHKEY] = to.meta.PATHKEY === 'path' ? `/${to.meta.pagePath}` : `${to.path}`;
        fromPath[from.meta.PATHKEY] = from.meta.PATHKEY === 'path' ? `/${from.meta.pagePath}` : `${from.path}`;

        if (to.meta.PATHKEY == null) { // 未使用uni-pages.json中的配置、通过addRoutes时 meta.PATHKEY 可能未undefined
            toPath = pathToRute(to.path, Router.selfRoutes).PATHKEY;
        }
        if (from.meta.PATHKEY == null) {
            fromPath = pathToRute(from.path, Router.selfRoutes).PATHKEY;
        }

        const isEmptyTo = Object.keys(to.query).length != 0 ? copyObject(to.query) : copyObject(to.params);
        const isEmptyFrom = Object.keys(from.query).length != 0 ? copyObject(from.query) : copyObject(from.params);
        /* eslint-disable */
        delete isEmptyTo.__id__; // 删除uni-app下的内置属性
        delete isEmptyFrom.__id__;
        /* eslint-enable */
        const toQuery = Global.$parseQuery.queryGet(isEmptyTo).decode;
        const fromQuery = Global.$parseQuery.queryGet(isEmptyFrom).decode;
        toRoute = resolveRule(Router, toPath, toQuery, Object.keys(toPath)[0]);
        fromRoute = resolveRule(Router, fromPath, fromQuery, Object.keys(fromPath)[0]);
    } else {
        if (fromRoute.name == null && toRoute.name != null) { // 这种情况是因为uni-app在使用vue-router时搞了骚操作。
            fromRoute = {
                ...fromRoute,
                ...{
                    name: toRoute.name,
                },
            }; // 这个情况一般出现在首次加载页面
        }
    }
    return {
        toRoute,
        fromRoute,
    };
};
export const vueDevRouteProxy = function (routes, Router) {
    const proxyRoutes = [];
    for (let i = 0; i < routes.length; i += 1) {
        const item = routes[i];
        const childrenRoutes = Reflect.get(item, 'children');
        if (childrenRoutes != null) {
            const childrenProxy = vueDevRouteProxy(childrenRoutes, Router);
            item.children = childrenProxy;
        }
        const ProxyRoute = proxyBeforeEnter(Router, item);
        proxyRoutes.push(ProxyRoute);
    }
    return proxyRoutes;
};
/**
 * 组装成编码后的路由query传递信息
 * @param {Object} CONFIG simple-router 对象配置
 * @param {Object} query 传递的参数
 * @param {Object} mode 路由模式
 */

export const encodeURLQuery = function (CONFIG, query, mode) {
    if (Object.keys(query).length == 0) { // 没有传值的时候 我们啥都不管
        return '';
    }
    if (CONFIG.h5.vueRouterDev === false) { // 没有采取完全模式开发时 才转换
        const { strQuery, historyObj } = Global.$parseQuery.queryGet(query);
        if (mode === 'history') {
            return historyObj;
        }
        return strQuery;
    } // 完全彩种 vue-router 开发的时候 我们不用管
    if (mode === 'history') { // 此模式下 需要的就是对象
        return query;
    }
    return Global.$parseQuery.stringify(query); // hash转成字符串拼接
};
/**
 * 把一个未知的路由跳转规则进行格式化为 hash、history 可用的,主要表现在 history模式下直接传入path会报错__id__错误的问题
 * @param {*} path 需要判断修改的路径规则
 */
export const strPathToObjPath = function (path) {
    if (path == null) { // 我们也不用管啦,这个情况是路由守卫中传递的
        return path;
    }
    if (isObject(path)) { // 是对象我们不用管
        return path;
    }
    return { // 这种情况就是只有path时,直接返回path对象了
        path,
    };
};
/**
 * 通过 getCurrentPages() api 获取指定页面的 page 对象 默认是获取当前页面page对象
 * @param {Number} index //需要获取的页面索引
 * @param {Boolean} all //是否获取全部的页面
 */
export const getPages = function (index = 0, all) {
    const pages = getCurrentPages(all);
    return pages.reverse()[index];
};
/**
 * 获取当前页面下的 Route 信息
 *
 * @param {Object} pages 获取页面对象集合
 * @param {Object} Vim 用户传递的当前页面对象
 */
export const H5GetPageRoute = function (pages, Vim) {
    if (pages.length > 0) { // 直接取当前页面的对象
        const currentRoute = pages[pages.length - 1].$route;
        return getRouterNextInfo(currentRoute, currentRoute, this).toRoute;
    } if (Vim && Vim.$route) {
        return getRouterNextInfo(Vim.$route, Vim.$route, this).toRoute;
    }
    return {};
};

/**
 * 在useUniConfig:true 的情况下重新拼装路由表 useUniConfig:false 不需要读取page.json中的数据 直接使用component作为页面组件
 * @param {Router} Router//unis-simple-router 路由对象
 * @param {vueRouter} vueRouter//vue-router对象
 * @param {Boolean} useUniConfig//是否采用uni-page.json中的配置选项
 * @param {Array} routes//需要循环的routes表
 */
export const diffRouter = function (Router, vueRouter, useUniConfig, routes) {
    const newRouterMap = [];
    if (useUniConfig) { // 使用pages.json的样式配置 只是单纯的把url路径改成用户自定义的 保留uni的所以的配置及生命周期、缓存
        const Routes = routes || vueRouter.options.routes;
        const cloneSelfRoutes = copyObject(Router.selfRoutes); // copy一个对象随便搞xxoo
        Routes.forEach(((item) => {
            const path = item.path === '/' ? item.alias : item.path;
            const vueRoute = (Router.vueRoutes[path] || Router.vueRoutes[item.path]) || Router.selfRoutes[path];
            const CselfRoute = Router.selfRoutes[path];
            delete cloneSelfRoutes[path]; // 移除已经添加到容器中的路由，用于最后做对比 是否page.json中没有，而实例化时传递了
            if (CselfRoute == null) {
                return err(
                    `读取 ‘pages.json’ 中页面配置错误。实例化时传递的路由表中未找到路径为：${path} \r\n\r\n 可以尝试把 ‘useUniConfig’ 设置为 ‘false’。或者配置正确的路径。如果你是动态添加的则不用理会`,
                );
            }
            let pageConfigJson = {
                config: {},
            };
            if (vueRoute.component) {
                pageConfigJson = getFuntionConfig(vueRoute.component.render.toString());
                CselfRoute.component = {
                    render: (h) => vueRoute.component.render(h),
                };
            }
            delete CselfRoute.components; // useUniConfig:true 时不允许携带components
            delete CselfRoute.children; // useUniConfig:true 时不允许携带children
            CselfRoute.meta = {
                ...pageConfigJson.config,
                ...item.meta || {},
                PATHKEY: CselfRoute.aliasPath ? 'aliasPath' : 'path',
                pagePath: CselfRoute.path.substring(1),
            };
            CselfRoute.path = CselfRoute.aliasPath || (item.path === '/' ? item.path : CselfRoute.path);
            item.alias = item.path === '/' ? item.alias : CselfRoute.path; // 重新给vueRouter赋值一个新的路径，欺骗uni-app源码判断
            const ProxyRoute = proxyBeforeEnter(Router, CselfRoute);
            newRouterMap.push(ProxyRoute);
        }));
        if (Object.keys(cloneSelfRoutes).length > 0) { // 确实page.json中没有，而实例化时传递了
            const testG = cloneSelfRoutes['*']; // 全局通配符,他是个例外'通配符'可以被添加
            if (testG && routes == null) {
                const ProxyRoute = proxyBeforeEnter(Router, Router.selfRoutes['*']);
                newRouterMap.push(ProxyRoute);
            }
            if (routes == null) { // 非动态添加时才打印警告
                const cloneSelfRoutesKeys = Object.keys(cloneSelfRoutes);
                for (let i = 0; i < cloneSelfRoutesKeys.length; i += 1) {
                    const key = cloneSelfRoutesKeys[i];
                    if (key !== '*') { // 通配符不警告
                        warn(`实例化时传递的routes参数：\r\n\r\n ${JSON.stringify(cloneSelfRoutes[key])} \r\n\r\n 在pages.json中未找到。自定排除掉，不会添加到路由中`);
                    }
                }
            }
        }
    } else { // 不使用任何的uni配置完全使用 完全使用component作为页面使用
        const Routes = routes || Router.selfRoutes;
        const RoutesKeys = Object.keys(Routes);
        for (let i = 0; i < RoutesKeys.length; i += 1) {
            const key = RoutesKeys[i];
            const item = Routes[key];
            // eslint-disable-next-line
            if (item._ROUTERPATH != null) { // 不寻找children下的路径，只取第一层
                continue;
            }
            delete item.components;
            delete item.children;
            item.path = item.aliasPath || item.path; // 优先获取别名为路径
            if (item.path !== '*') {
                item.component = item.component.render || item.component; // render可能是用户使用addRoutes api进行动态添加的
            }
            item.meta = {
                ...item.meta || {},
                PATHKEY: item.aliasPath ? 'aliasPath' : 'path',
                pagePath: item.path.substring(1),
            };
            const ProxyRoute = proxyBeforeEnter(Router, item);
            newRouterMap.push(ProxyRoute);
        }
    }
    return newRouterMap;
};