摘要:直接调用构造函数使用,一个可能含某种匹配模式的路径字符串作为它的必选参数,它返回一个正则对象。有两个方法返回一个正则对象,效果与调用构造函数一样返回一个函数,该函数与下面的返回的函数功能一样方法,同样接收一个路径字符串。
code in here
使用path-to-regexp,我们可以在路径字符串中使用正则。如/:foo*/:bar?、/icon-:foo(d+).png等。
像express、vue好多框架都引用它做路径匹配,看一看,一劳永逸。
直接调用构造函数使用,一个可能含某种匹配模式的路径字符串作为它的必选参数,它返回一个正则对象。
我们的请求路径与该正则匹配,匹配成功就是接上头了。
</>复制代码
const pathToRegexp = require("path-to-regexp")
var regexp_1 = pathToRegexp("/foo/:bar")// /^/foo/([^/]+?)(?:/)?$/i
regexp_1.exec("/foo/barrrr")//匹配成功 =>RegExpExecArray [ "/foo/barrrr", "barrrr", index: 0, input: "/foo/barrrr" ]
regexp_1.exec("/bazzzz")//匹配失败 => null
/foo/:bar中的/为分隔符,把多个匹配模式分隔开,这里就分成foo和:bar。像foo这种不带:前缀的,我们请求的路径需要和它完全匹配,而:bar这种,叫命名参数,就像个函数形参,可以传递任何请求路径字串给它。
在命名参数上,我们可以使用参数修饰符作为其后缀,有?、+、*
</>复制代码
var regexp_2 = pathToRegexp("/foo/:bar*")
regexp_2.exec("/foo/a/b/c")// => [ "/foo/a/b/c", "a/b/c", index: 0, input: "/foo/a/b/c" ]
regexp_2.exec("/foo")// => [ "/foo", undefined, index: 0, input: "/foo" ]
*表示我这个命名参数:bar可以接收随意个匹配模式,就好像参数数组长度[0,+∞)
</>复制代码
var regexp_3 = pathToRegexp("/foo/:bar+")
regexp_3.exec("/foo/a/b/c")// => [ "/foo/a/b/c", "a/b/c", index: 0, input: "/foo/a/b/c" ]
regexp_3.exec("/foo")//匹配失败 => null
+ 表示命名参数可以接收至少一个匹配模式,一个都没就匹配失败,[1,+∞)
</>复制代码
var regexp_4 = pathToRegexp("/foo/:bar?")
regexp_4.exec("/foo/a")// => [ "/foo/a", "a", index: 0, input: "/foo/a" ]
regexp_4.exec("/foo/a/b/c")// => null
regexp_4.exec("/foo")// => [ "/foo", undefined, index: 0, input: "/foo" ]
? 表示命名参数可以接收0个或1个匹配模式,多个失败,[0,1]
我们还可以为命名参数加上自定义的正则匹配模式
</>复制代码
var regexp_5 = pathToRegexp("/icon-:foo(d+).png")
regexp_5.exec("/icon-123.png")// => [ "/icon-123.png", "123", index: 0, input: "/icon-123.png" ]
regexp_5.exec("/icon-abc.png")// null
以上设置表示:foo只能是数字。
更牛X的是,某些时候不需要命名参数这个占位符,通过正则就能就能匹配。
</>复制代码
var regexp_5 = pathToRegexp("/icon-(d+).png")
regexp_5.exec("/icon-123.png")// => [ "/icon-123.png", "123", index: 0, input: "/icon-123.png" ]
regexp_5.exec("/icon-abc.png")// null
以上就是这个lib包含的所有匹配形式了。
鸡肋部分path-to-regexp还包含了没什么用的参数和方法。
构造函数上的可选参数keys
</>复制代码
var regexp_6 = pathToRegexp("/:foo/icon-(d+).png",keys)
regexp_6.exec("/home/icon-123.png")// => [ "/icon-123.png", "123", index: 0, input: "/icon-123.png" ]
regexp_6.exec("/about/icon-abc.png")// null
console.log(keys)
/**
keys output =>
[ { name: "foo",
prefix: "/",
delimiter: "/",
optional: false,
repeat: false,
partial: false,
pattern: "[^/]+?" },
{ name: 0,
prefix: "",
delimiter: "/",
optional: false,
repeat: false,
partial: false,
pattern: "d+" } ]
*/
keys为一个数组,包含了所有参数的具体信息,看属性名就知道这些信息具体是干嘛的了。
注意: 未命名参数的keys.name为0
方法pathToRegexp.parse(path),接收一个路径字符串参数
</>复制代码
var tokens = pathToRegexp.parse("/foo/:baz/icon-(d+).png")
console.log(tokens)
/**
tokens output =>
[ "/foo",
{ name: "baz",
prefix: "/",
delimiter: "/",
optional: false,
repeat: false,
partial: false,
pattern: "[^/]+?" },
"/icon-",
{ name: 0,
prefix: "",
delimiter: "/",
optional: false,
repeat: false,
partial: false,
pattern: "d+" },
".png" ]
*/
该方法返回一个tokens数组,该数组与keys类似,不过它还包含路径中那些非参数部分,如tokens[0]的/foo。
我们可以不传具体的路径字符串,而使用tokens代替。
</>复制代码
var regexp_7 = pathToRegexp.tokensToRegExp(tokens)
regexp_7.exec("/foo/bazzz/icon-123.png")//[ "/foo/bazzz/icon-123.png","bazzz","123",... ]
var toPathWithTokens = pathToRegexp.tokensToFunction(tokens)
toPathWithTokens({baz:"bazzz",0:"123"}) // => /foo/bazzz/icon-123.png
有两个方法:
pathToRegexp.tokensToRegExp(tokens) 返回一个正则对象,效果与调用构造函数一样
pathToRegexp.tokensToFunction(tokens) 返回一个函数,该函数与下面的compile(path)返回的函数功能一样
方法 pathToRegexp.compile(path),同样接收一个路径字符串。
</>复制代码
var toPath = pathToRegexp.compile("/foo/:baz/icon-(d+).png")
toPath({baz:"bazzz",0:"123"})//=> /foo/bazzz/icon-123.png
该方法返回一个函数,该函数接收一个对象,以对象的形式传值给路径参数,返回请求路径。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93960.html
摘要:可以指定一个具体值,而非增量,在之间。这是因为,使进度增加超过时,会变成,之后又从重新开始。所以,当为时,我们停止调用。 依赖jQuery。 import nprogress from nprogress import nprogress/nprogress.css $(#btn-loading).on(click, function () { nprogress.start...
摘要:绘制变换曲线起飞以上函数就是我们基于内置的实现的自定义变换。例如飞行动画结束后,将飞机复位。 如何运行的? new Vue({ el:#app-1, data:{ position:{ distance:10, height:30, } }, methods:{ ...
摘要:调用全局的守卫。在被激活的组件里调用。用创建好的实例调用守卫中传给的回调函数。 本文适用于对 Vue.js 和 vue-router 有一定程度了解的开发者除特殊说明,vue-router 版本为 3.0.2 正文 路由 class 匹配 路由匹配后会给该标签添加 class 属性值 .router-link-active,该功能在嵌套路由中十分方便 class 的实际属性值可以通...
阅读 3362·2021-09-22 15:58
阅读 1799·2019-08-30 14:17
阅读 1790·2019-08-28 18:05
阅读 1589·2019-08-26 13:33
阅读 753·2019-08-26 12:20
阅读 684·2019-08-26 12:18
阅读 3274·2019-08-26 11:59
阅读 1476·2019-08-26 10:36
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要