Route

属性

path { String }

用于匹配 URL 的路由，当使用 / 开头时，被认为是绝对路径，否则认为是相对路径，将自动连接父路径。

component { Component }

当匹配到当前路由上时匹配的组件，会被渲染为父组件的 this.props.children。

const routes = (
 <Route path="/" component={App}>
   <Route path="groups" component={Groups} />
   <Route path="users" component={Users} />
 </Route>
)
class App extends React.Component {
 render () {
   return (
     <div>
       {this.props.children}
     </div>
   )
 }
}

components { Object }

可以定义多个命名组件，这样不会直接渲染为父组件的 children，而是当做 props 赋给父组件。

const routes = (
 <Route path="/" component={App}>
   <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} />
   <Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
     <Route path=":userId" component={Profile} />
   </Route>
 </Route>
)
class App extends React.Component {
 render () {
   const { main, sidebar } = this.props
   return (
     <div>
       <div className="Main">
         {main}
       </div>
       <div className="Sidebar">
         {sidebar}
       </div>
     </div>
   )
 }
}
class Users extends React.Component {
 render () {
   return (
     <div>
       {this.props.children}
     </div>
   )
 }
}

navigation { Object }

接受一个 navigator 配置对象，与 hysdk/QunarAPI 的配置方式基本相同，区别在于将类型 type 放在里面处理了。

const nav = {
 type: 'normal', // normal/transparent/none 支持去掉 navibar- 的缩写，也可以写 navibar-normal
 title: { style: 'text', text: '标题' },
 left: { ... },
 section: {
   left: 'header .regret', // 对应 h5 的元素，在点击 native 时，可以模拟点击 h5
   title: 'header .title$', // 在类名末尾添加 `$` 表示阻止 native 处理该事件
   $buttonsDoNotSimulate: [ 'left' ] // 阻止模拟点击的按钮，默认阻止了 'left' 按钮穿透点击 h5
 },
 // 支持三种，touchTap/tap/click，用于模拟点击 h5 header 的元素
 // 其中 touchTap 对应的是引入 onTouchTap 插件之后绑定的 onTouchTap 事件；
 // tap 对应的是 Yo 的 Touchable 组件绑定的 tap 事件（实际上是模拟 onTouchStart 和 onTouchEnd）
 // click 就是 onClick
 // 默认是 tap
 $simulateType: 'tap'
}

animate { String }

页面跳转动画，包括 moveFromRight/moveFromBottom/none，只有 hy 环境和 spa 有，多页场景下没有。注意，在 useViewStack 设置为 false 时将不会生效。

extraClass { String }

根组件附加类名，对 <yorouter-view> 元素添加自定义类名。注意，在 useViewStack 设置为 false 时将不会生效。

extraStyle { String }

根组件附加样式，对 <yorouter-view> 元素进行样式操作。注意，在 useViewStack 设置为 false 时将不会生效。

onEnter { Function }

配置 onEnter 回调，在进入路由前调用。三端均可使用该周期。

如果想使用三端通用的生命周期，建议使用withRouter 中的 lifecyle，为组件绑定 actived、inited、received 和 deactived 四个生命周期。

<Route path="/" onEnter={() => log('enter /')}>
 <Route path="hello" onEnter={() => log('enter /hello')} />
</Route>
// 进入 /hello 页面，打印如下：
// enter /
// enter /hello

onChange { Function }

配置 onChange 回调，在路由改变时调用。注意，只有单页应用会触发这个回调。

<Route path="/" onChange={() => log('onChange')}>
 <Route path="hello" />
 <Route path="test" />
</Route>
// 从 /hello 进入 /test 页面，会触发 onChange，因为 / 是两者的公共父路由，这次的变动没有退出父路由，仅仅触发了改变

onLeave { Function }

配置 onLeave 回调，在离开路由时调用。注意，只有单页应用会触发这个回调。

<Route path="/" onLeave={() => log('enter /')}>
 <Route path="hello" onLeave={() => log('enter /hello')} />
</Route>
// 离开这两个页面，打印如下：
// enter /hello
// enter /

方法

getComponent

与 component 类似，异步获取组件，用于进行代码分离。

<Route path="courses/:courseId" getComponent={(nextState, cb) => {
 // 异步方法获取组件
 cb(null, Course)
}} />

方法参数:

getComponents

与 components 类似，异步获取组件，用于进行代码分离。

<Route path="courses/:courseId" getComponents={(nextState, cb) => {
 // 异步方法获取组件
 cb(null, {sidebar: CourseSidebar, content: Course})
}} />

方法参数: