Omi 入坑指南 第四场 Router

在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 中直接处理掉这个数据