在React的世界里面有React-Router,Vue的世界里有Vue-Router,当然在Webpack这个打包工具里面如果没有一个Router扩展包的话，那是不可能的，所以进入的Omi-Router的学习
omi-router 安装
npm install omi-router
//或者
yarn add omi-router
我们只需要在我们的组件中加入入口文件omi-router可能能拥有一个全局的router变量。我测试后看看是不是。
我们今天使用的是Omi init 的模板做实验
进入我们的主组件src/elements/index.js中修改成以下代码
import 'omi-router'; //引入router 获取全局 route
import { define, WeElement } from 'omi'
import '../app-intro'
define('my-app', class extends WeElement {
//我们的 路由配置文件写在这里
data = {
tag: ''
}
install() {
//路由配置
route('/', () => {
this.data.tag = 'app-intro'
})
}
render(props, data, store) {
return (
<div class="app">
<data.tag params={{}} /> {/* 我还是第一次知道 jsx 中 有这样写法在 233 */}
</div>
)
}
})
这样写后我们的浏览器会给我们一个很大的惊喜
看来install并不是我想象中那样是create的生命周期,所以我们的代码要修改一下。
...
data = {
tag:'app-intro'
}
...
还有我们这里app-intro是我们web components里面定义的 define 标签。
回到我们的浏览器中可以看到
下面我们看看Omi-router 能否支持 嵌套写法，这个功能可以说是React-Router 4.0 最强大的功能，很多国内的高管都还喜欢用Router 3.0 的那套 ，也就是 Vue-router 的那套管理机制，那套管理机制是上古遗留机制，你的系统真的做大了，router页面组件嵌套复杂的时候，这套上古机制就会发现问题了，自己慢慢体会吧。
我们进入app-intro中进行修改
import { define, WeElement } from 'omi'
import route from 'omi-router';
import '../hello';
define('app-intro', class extends WeElement {
data = {
tag:'hello-element'
};
css() {
}
install() {
route('/aoo', () => {
this.data.tag = 'hello-element'
})
}
render(props, data) {
console.log(data);
return (
<p class="app-intro">
Google
<data.tag params={{}} />
</p>
)
}
})
我们回到浏览器
目测可以吧，作者再进行改造一次
//src/app/index.js
import 'omi-router'; //引入router 获取全局 route
import { define, WeElement } from 'omi'
import '../app-intro';
import '../hello';
define('my-app', class extends WeElement {
//我们的 路由配置文件写在这里
static observe = true
data = {
tag: 'app-intro'
}
install() {
//路由配置
route('/', () => {
this.data.tag = 'app-intro'
})
route('/name', () => {
this.data.tag = 'hello-element'
})
}
render(props, data, store) {
return (
<div class="app">
<data.tag params={{}} /> {/* 我还是第一次知道有这样额写法在 jsx 中233 */}
</div>
)
}
})
//app-intro
import { define, WeElement } from 'omi'
import route from 'omi-router';
import '../hello';
import '../hello/null';
define('app-intro', class extends WeElement {
static observe = true
data = {
tag:null
};
css() {
}
install() {
route('/aoo', () => {
this.data.tag = 'hello-element'
})
route('/aop', () => {
this.data.tag = 'null-element'
})
}
render(props, data) {
console.log(data);
return (
<p class="app-intro">
Google
{data.tag !== null && <data.tag params={{}} />}
</p>
)
}
})
回到浏览器中
预期的效果都能看到，不过用omi的同学记得一定要static observe = true这个设置一下
可以看出 Omi 也是支持 路由在复杂情况下嵌套的写法。给100个赞。
在Omi中Route 的api 很简单 就一个参数，把很多东西都去掉了，因为我们大部分时候就只需要在url中获取两个东西 query 和 params 在作者的官网中。
在Omi中我们只要知道两个东西就好了
一个 route.query 和 一个 route.params
不需要像React 中 我们需要引入query-string去进行解析 hosiery.location.search，
也不用像Vue里,没有智能提示的而忘记单词的尴尬操作，像作者英语不好的，没有智能提示还真的会死人。
route('/about', (evt) => {
//点击上面的标签会输出 { name: 'dntzhang', age : '18' }
console.log(evt.query)
})
在Omi-Router 中 你要处理 路由操作等数据时，和Vue，React 都不一样，它是在你写Route('',()=>{})中就要可以要你想要的参数等数据先保存到 你自己的 data 或者 prop 或者 store ，然后到 inserted 这个生命周期函数中进行render 前处理，不过你也可以在Route 中直接处理掉这个数据
