我有这样的路线
/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}
答案 0 :(得分:0)
根据您是否使用哈希/#/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?'))