Question

我有这样的路线

/index
/control/action/:param1
/control/action/:param1/edit/:param2/:nullparam?

我有这样的道路

/control/action/profile/edit/yoza

我有两个问题：与纯js如何指定/读取该路径是为第三条路径

/control/action/:param1/edit/:param2/:nullparam?

如何通过这样的路径将此路径转换为js对象：

{ param1 : 'profile', param2 : 'yoza' , nullparam :null}

Answer 1

根据您是否使用哈希/#/pathhere地址或常规/pathhere地址，原始路径可通过location.hash或location.pathname

访问

我刚才写了一个简单的路由器。见下文:(可能需要改进，但在大多数情况下应该有效）

通用算法是将模式（路径规范）和浏览器当前路径分别用'/'标记分开，并比较各个组件（在需要时提取）。

或者，某些路由器可能会将模式转换为正则表达式并使用常规快速捕获组来完成相同的操作

// splits a path nicely by '/' characters
function splitpath(path){
    if(!path)
        return [];

    var arr = path.split('/');
    for(var i = 0; i < arr.length; i++){
        if(arr[i].trim().length === 0){
            arr.splice(i, 1);
            i--;
        }
    }
    return arr;
}

// Given a path and its pattern, try to parse it into list of parameters (or NULL if it can't be parsed)
// i.e  parsepath('/r/hello' '/r/:room') should return { room: 'hello' }
function parsepath(path, pattern){

    path = splitpath(path), pattern = splitpath(pattern);

    var params = {};
    for(var i = 0; i < pattern.length; i++){

        if(pattern[i].charAt(0) == ':'){ // Capture group
            var name = pattern[i].slice(1);
            var optional = false;
            if(name.charAt(name.length - 1) == '?'){
                optional = true;
                name = name.slice(0, name.length - 1);
            }
            if(!optional && path.length <= i){
                // Missing mandatory param
                return null;
            }

            if(path.length <= i)
                params[name] = null; // Set to null for a missing optional param
            else 
              params[name] = decodeURIComponent(path[i]);
        }
        else{ // Matching pattern
            if(pattern[i] != path[i])
                return null;
        }
    }

    return params;
}

console.log(parsepath(
'/control/action/profile/edit/yoza/abc',
'/control/action/:param1/edit/:param2/:nullparam?'))

js路由器如何使用纯js指定参数？

1 个答案: