定义一个简单的路由
路由的基本目的是匹配确定的URL并以执行某项操作作为结果。这一切都发生在客户端,在用户的浏览器应用中或者移动端的应用容器中。让我们通过示例应用Todos动手做一个例子:
FlowRouter.route('/lists/:_id', {
name: 'Lists.show',
action(params, queryParams) {
console.log("Looking at a list?");
}
});
路由的处理器将在这两种情形下运行:页面最初以一个匹配格式的URL地址载入,或者当页面已经打开时URL被更改为另一个匹配格式的URL。需要注意的是,这与在服务端渲染的应用不同,URL可以在不向服务器端发送任何额外请求的前提下被更改。
当路由被匹配时,action
方法会被执行,并且你可以执行一些你想要去做的动作。路由的name
属性是可选的,但它将使我们在之后更方便的处理路由。
URL格式匹配
仔细查看一下被用在上述代码片段中的URL格式:
'/lists/:_id'
这个格式将匹配一个确定的URL地址。你或许注意到了一部分的URL被放在:
之后 - 这表示它是一个 url参数 ,路由将匹配地址中这部分所呈现的任何字符。Flow Router把这部分URL放在当前路由的params
属性中。
另外,URL可以包含HTTP query string (在?
之后的部分)。这种情况下,Flow Router也会把它放入名为queryParams
的参数中。
这里有一些URL的示例以及产生的params
与queryParams
:
URL地址 | 是否进行格式匹配? | params | queryParams |
---|---|---|---|
/ | 否 | ||
/about | 否 | ||
/lists/ | 否 | ||
/lists/eMtGij5AFESbTKfkT | 是 | { _id: "eMtGij5AFESbTKfkT"} | { } |
/lists/1 | 是 | { _id: "1"} | { } |
/lists/1?todoSort=top | 是 | { _id: "1"} | { todoSort: "top" } |
注意,URL并没有编译数据类型的方法,所以所有的params
与queryParams
的值都是字符型。举个栗子,如果你希望某个参数表现为数字型,当你访问它时可能需要用parseInt(value, 10)
来进行类型转换。