By
被删
更新日期:
因为对Rxjs的好感玩上了Cycle.js，《Cycle.js学习笔记》系列用于记录使用该框架的一些笔记。
本文记录使用cyclic-router来启动页面路由的过程。
启用页面路由
cyclic-router是为Cycle.js设计的路由驱动。
1
| npm install --save cyclic-router switch-path
|
这里面我们直接使用了官方推荐的switch-path，它提供路由匹配功能。
cyclic-router在V3和V4版本是需要注入路由匹配模块，而在V2版本前是内置switch-path，则不需要安装。
更多关于cyclic-router大家可以参考github–cyclic-router。
路由入口
我们将在启动主入口run()的时候添加进路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| import {run} from '@cycle/run'
import xs from 'xstream';
import {makeDOMDriver} from '@cycle/dom';
import {makeRouterDriver} from 'cyclic-router';
import {createHashHistory} from 'history';
import switchPath from 'switch-path';
import {AppComponent} from './app'
import {LoginComponent} from './login'
function main(sources) {
const match$ = sources.router.define({
'/login': LoginComponent,
'/app': AppComponent,
'*': LoginComponent
});
const page$ = match$.map(({path, value}) => {
return value(Object.assign({}, sources, {
router: sources.router.path(path)
}));
});
return {
DOM: page$.map(c => c.DOM).flatten(),
router: xs.merge(page$.map(c => c.router).filter(x => x || '').flatten()),
};
}
run(main, {
DOM: makeDOMDriver('#app'),
router: makeRouterDriver(createHashHistory(), switchPath)
});
|
添加登陆页面跳转
这里我们添加一个登陆页面，主要用于登陆后路由跳转：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import { html } from 'snabbdom-jsx';
import xs from 'xstream';
export function LoginComponent(sources) {
const domSource = sources.DOM;
const loginClick$ = domSource.select("#submit").events("click");
const loginView$ = xs.merge().startWith(
<form>
<h1>System</h1>
<div><input type="text" placeholder="username" /></div>
<div><input type="password" placeholder="password" /></div>
<div><button>Login</button></div>
</form>
);
return {
DOM: loginView$,
router: xs.merge(
loginClick$.mapTo("/app")
),
};
}
|
跳转这个功能，本骚年可能尝试了无数遍，终于发现并不是登录页面的路由有问题，而是主入口的路由：
1
2
3
4
5
6
| return {
DOM: page$.map(c => c.DOM).flatten(),
router: xs.of('/other'),
};
|
经过深思熟虑之后，本骚年这样使用：
1
2
3
4
5
6
| return {
DOM: page$.map(c => c.DOM).flatten(),
router: xs.merge(page$.map(c => c.router).filter(x => x || '').flatten()),
};
|
终于成功啦。
结束语
这节主要讲了使用cyclic-router来搭建路由，实现路由匹配和页面跳转等功能。
此处查看项目代码
此处查看页面效果
查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢
