跳转控制
一般开发者涉及到三种路由跳转方式
例子都以下述配置为例
const routes = {
'app': {
view: Regular.extend({
template: `<h2>App模块</h2><div r-view></div>`
})
},
'app.blog': {
url: 'blog/:id', // /:id也是可以的
view: Regular.extend({
template: `<h3>Blog模块</h3><div r-view></div>`
})
},
'app.blog.detail': {
view: Regular.extend({
template: `<h4>BlogDetail模块</h4>`
})
},
'app.blog.edit': {
view: Regular.extend({
template: `<h4>BlogEdit模块</h4>`
})
}
}
[API] r-link
r-link
会根据是否以html5
模式启动来判断设置的href格式
example
当this.data.id
为1.
<!-- this.data.id = 1 -->
<a href='app.blog({id:id})'>A</a>
以hash模式启动时输出
<a href="#/app/blog/1" >A</a>
以html5模式开启时会输出
<a data-autolink="data-autolink" href="/app/blog/1">A</a>
其中data-autolink
是一个标记,使得系统知道这个链接需要单页内跳转
当启动时设置了root
, r-link
也会一并处理, 所以始终建议使用r-link
去设置路径而不是手动拼装href
属性
[API] manager.nav
跳转到指定路径,url中匹配到的参数会合并到option, 并最终传给之前提到的enter
, leave
, mount
函数.
Usage
manager.nav(url[, option][, callback])
;
Argument
Param | Type | Detail |
---|---|---|
url | String | 跳转url |
option(optional) | Object | 路由option. url参数会作为option的param参数. |
callback(optional) | Function | 跳转结束后,此函数会被调用 |
control option
- option.silent: 如果传入silent, 则只有url路径会发生改变,但是不触发manager内部的状态改变, 即不会有enter, leave或mount触发
- option.replace: 如果replace === true, 之前历史的记录会被当前替换,即你无法通过浏览器的后退,回到原状态了
Example
manager.nav("/app/blog/1?name=leeluolee", {data: 1});
最终传入到钩子函数的option会是
{param: {id: "1", name:"leeluolee"}, data: 1}
.
[API] manager.go
跳转到特定状态, 与 manager.nav 非常相似,但是manager.go
使用状态别名来代替url路径进行跳转
Usage
manager.go(stateName [, option][, callback])
;
Arguments
stateName [String]: 目标状态别名
option [Object]: 控制跳转行为 此参数会merge到跳转参数option中
option.param:
nav与go的最大区别就在于param参数
如果你的路径中带有参数,则需要传入param来帮助encode函数推算出url路径
option.replace: 见manager.nav
option.encode:
默认是true, 如果encode是false. 则地址栏的url将不会发生变化,仅仅只是触发了内部状态的跳转. 当encode为true时,
regular-state
会使用encode 函数去反推url路径并显示在location中.
- calback [Function]: 跳转结束后的回调函数
所有其它的option属性将会与param一起传入 enter
, leave
, mount
中.
Example
manager.go('app.blog.detail', {param: {id:1, name: 'leeluolee'}});
地址会跳转到#/app/blog/1?name=leeluolee
, 你可以发现未命名参数会直接拼接在url后方作为queryString 存在.
始终推荐在大型项目中使用go代替nav来进行跳转, 这样在路由规则发生变更时,就无需做大量重构