# aotoo-react-pager
**Repository Path**: webkixi/aotoo-react-pager
## Basic Information
- **Project Name**: aotoo-react-pager
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-03
- **Last Updated**: 2021-01-06
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# @aotoo/react-pager
基于react的一款前端路由(仿小程序),支持node端渲染,在`aotoo-hub`中可以查看该路由使用方法,[**戳这里**](http://www.agzgz.com)
## 安装
```bash
npm install @aotoo/react-pager
# 或者
yarn add @aotoo/react-pager
```
## Pager方法
我们使用`Pager`来构建单页面,仿小程序页面生命周期
```js
import React from 'react'
import ReactDOM from 'react-dom'
import Pager from '@aotoo/react-pager'
function template(state, props) {
return
{state.file}
}
const page = Pager({
// page的模板方法
template,
// 可以通过setData方法修改此处参数
data: {
file: 'readme.md',
},
// 页面开始的方法
// 接收上一个页面传递的数据
onLoad(param){
let file = param.file
let $file = this.getData().file
if (file && file !== $file) {
this.setData({ file })
}
},
// 页面显示时调用
// 每个页面都会调用onLoad和onShow方法,
// 当使用navigateTo方法跳转页面时, back回来此页面时会调用onShow的方法
onShow(){},
// 页面卸载时
onUnload(){},
// 页面dom元素全部加载完成时
onReady(){}
})
ReactDOM.render(, document.getElementById('root'))
```
## Pager.pages
该方法用于定义路由表,构建SPA项目。支持node端渲染。默认会自动渲染结构到 `#root` 容器
### 语法
```js
Pager.pages([
item,
item,
...
], options)
```
### items
路由表数组
`item.url`
{String}
路由地址,该条路由的ID,必须指定唯一值,地址栏的hash部分将显示该值
`item.content`
{Function}
指定路由子页内容,支持全量引入(require),支持按需引入(import)
### options
`options.root`
{String}
默认为`root`,指定路由容器
`options.sep`
{String}
默认为`#`,置为空则转为内存路由
`options.maxAge`
{String}
路由历史记录的缓存事件,使用saveHistory方法时调用
`options.header`
{[JSX|Function]}
配置路由页面的头部,支持JSX,或者item组件配置
`options.footer`
{[JSX|Function]}
配置路由页面的底部,支持JSX,或者item组件配置
`options.menus`
{[JSX|Function]}
配置路由页面的菜单部分,支持JSX
`options.select`
{[String]}
默认菜单项,默认显示页面,填写路由子线配置的`url`属性,该属性支持query方式传递参数给进入页面,不填写则默认第一条路由数据作为首页
`options.beforeNav`
{Function}
全局路由守卫,手动拦截/放行所有路由
`options.goback`
{Function}
全局路由守卫,返回后执行该回调
`options.unLoad`
{Function}
路由卸载时,触发此方法
### 定义SPA路由表示例
**路由表**
```js
// index.js
import Pager from '@aotoo/react-pager'
const nav = Pager.nav
// 构建SPA路由,并自动渲染至#root容器(默认)
export default Pager.pages([
{url: '/index/a', content: import('./_subpages/a')},
{url: '/index/b', content: import('./_subpages/b')},
{url: '/index/c', content: require('./_subpages/c')},
], {
select: '/index/a',
})
```
**子页面**
```js
// ./_subpages/a.js
function template(state, props) {
return (
{state.title}
)
}
export default function(Pager) {
return Pager({
template,
data: {
title: '这是a页面'
},
onLoad(param){ // param为页面传递参数
// 页面加载时
},
onUnload(){
// 页面卸载时
},
onReady(){
// 页面dom已被渲染完成时
this.setData({
title: '为a页面设置新的内容'
})
}
})
}
```
**server**
```js
import index from '../index'
const htmlStr = await index
```
## Pager.nav
`Pager.nav`是一个对象,包含下面路由方法,路由方法的设计参考自小程序
- navigateTo
- navigateBack
- redirectTo
- redirectBack
- reLaunch
```js
const nav = Pager.nav
nav.navigateTo(...)
nav.relaunch(...)
...
```
### reLaunch
关闭所有页面,打开到应用内的某个页面
使用
```js
nav.reLaunch({
url: '',
success: function(){}
...
})
```
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| :----: | :----: | :----: | :----: | :---- |
| url | string | | 是 | 跳转的应用内页面路径 |
| beforeNav | function | | 否 | 跳转前动作 |
| success | function | | 否 | 跳转成功执行 |
| fail | function | | 否 | 跳转失败执行 |
| complete | function | | 否 | 跳转执行(成功&失败) |
| events | object | | 否 | 未实现 |
#### url
需要跳转的应用内页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
#### beforeNav(to, from, next)
跳转前方法,该方法可阻止跳转
`to`
{Object}
将要跳转的目的页面的配置
`from`
{Object}
当前页面的配置
`next`
{Function}
`next(param)`: 执行该方法允许路由跳转,param将被合并到to的参数中,允许修改将要跳转页面页面参数
```js
onClick(e, param, inst){
nav.redirectTo({
url: '/index/a?file=' + file,
beforeNav(to, from, next) {
if (满足条件) {
next()
}
}
})
}
```
### navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
配置参考 reLaunch
### navigateBack
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
配置参考 reLaunch
### redirectTo
关闭当前页面,跳转到应用内的某个页面。
配置参考 reLaunch
### redirectBack
关闭当前页面,返回上一页面
配置参考 reLaunch
## 路由实例
Pager是路由的封装方法,支持嵌套路由,每一次路由初始化将会产生一个新的路由实例,使用nav对象做路由跳转时,nav对象会自动匹配路有实例并实现路由跳转。
但有一些特殊点的实例方法需要手动操作
### 获取路由实例
```js
let router = Pager.getRouter() // 获取当前操作的路由实例
let rootRouter = Pager.getRootRouter() // 获取祖先路由实例
```
### 路由实例方法
**router.getCurrentPages**
获取当前路由的参数信息
**router.saveHistory**
保存路由的历史数据到localstorage,通常这个操作只针对rootRouter
**router.clearHistory**
清空路由的历史记录,当我们使用`reLaunch`路由方法时会自动调用,通常这个操作只针对rootRouter
**router.restoreHistory**
由localstorage恢复路由的历史记录,通常这个操作只针对rootRouter