在 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">
- <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">
- {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 中直接处理掉这个数据
来源: https://juejin.im/post/5c0754c3e51d45711f5751d5