路由注册

首先,我们需要通过restate方法获得一个manager实例

[API]restate([conf])

  • 参数

    • conf.routes: 如果传入routes配置, 会直接调用state方法注册
  • return Manager实例, Manager是Stateman的子类,改写了部分方法

restate即"regular-state"模块暴露的对外接口

const restate = require('regular-state');

const manager = restate({
    routes: {
        'app.blog': {
            url: '/blog/:id',
            view: Blog
        }
    }
})

[API]manager.state(routes) or manager.state(stateName[, config])

可通过manager实例的state方法注册路由节点

  • Usage

注册多个路由节点

manager.state({
    'app.blog': {
        title: '博客'
        url: '/blog/:id',
        view: Blog
    },
    'app.user': {
        url: '/user/:id',
        view: User
    }
})

或者只注册一个节点

manager.state('app.blog', {
    url: '/blog/:id'
    view: Blog
})
  • Return manager

第一个参数为字符串,第二参数空缺时,方法成为get函数,此时返回路由节点

manager.state('app.blog');// 返回 {view:Blog, url: '/blog/:id'}
  • Return state

上例的app.blog等字串我们称之为stateName, 它除了用作此路由节点的标示, 同时也暗示了各路由节点间的层级关系.

config参数说明

config.view:

一个『特殊』的Regular组件, 请参考模块章节

config.url

默认情况下, 将点. 替换为 /, 即为此节点的默认匹配路径. 同时regular-state也支持通过url来配置匹配路径

每个state对应的捕获url是所有在到此状态路径上的state的结合. 比如app.blog.detailapp,app.blogapp.blog.detail的路径结合

Example


manager.state({
    'app':{view: App},
    'app.blog':{
        url: '/blog/:id',
        view: Blog
    },
    'app.blog.detail':{
        view: BlogDetail
    }
})

点此查看DEMO

app.blog.detail的完整捕获路径就是/app/blog/:id/detail.

诚如你所见, 我们可以在url中定义我们的路径参数

注意/缺少或多余不会影响到匹配, 比如blog/:id/blog/:id是等价的

  • 绝对路径

如果你不需要父级的url定义,你可以使用^符号来使用绝对路径

manager.state({
    "app.blog.detail": {
        url: "^/detail/:id"
        view: 
    },
    "app.blog.detail.message": {
        view: BlogDetailMessage
    }

});

这样app.blog.detail的路径会直接变成 /detail/:id,子状态会被影响到也变为/detail/:id/message.

  • 空路径: 放弃当前这级的路径配置

如果你传入"", 你会放弃当前url配置, 这样你的捕获路径会与父状态一致(不过匹配优先级更高)

查看空路径和绝对路径的DEMO


const routes = {
  'app': {
    url: '',
    view: Regular.extend({
      template: `<h2>App模块</h2><div r-view></div>`
    })
  },
  'app.index': {
    url: '',
    view: Regular.extend({
      template: `首页<a href='#/detail/1'>点击跳转到detail模块</a>`
    })
  },
  'app.blog': {
    view: Regular.extend({
      template: `<h3>Blog模块</h3><div r-view></div>`
    })
  },
  'app.blog.detail': {
    url: '^/detail/:id',
    view: Regular.extend({
      template: `<h4>BlogDetail模块</h4>`
    })
  }
}

其中appapp.index使得空路径可以直接定位到app.index. 同时app.blog.detail使用了绝对路径, 使得不加'/blog'前缀也能指定进行定位

多种路径支持使得基于Regular-state的单页系统划分不再受url所限,而真正的可以通过页面组织来规划我们的应用

  • config.title

配置document.title

  • config.ssr

当开启了SSR渲染后, 我们也可以通过ssr参数来关闭当前节点的服务端渲染

results matching ""

    No results matching ""