跳转控制

一般开发者涉及到三种路由跳转方式

例子都以下述配置为例

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>`
    })
  }
}

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来进行跳转, 这样在路由规则发生变更时,就无需做大量重构

results matching ""

    No results matching ""