Omi 入坑指南 第四场 Router

栏目: JavaScript · 发布时间: 6年前

内容简介:在React的世界里面有React-Router,Vue的世界里有Vue-Router,当然在Webpack这个打包工具里面如果没有一个Router扩展包的话,那是不可能的,所以进入的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>
    )
  }
})

复制代码

这样写后我们的浏览器会给我们一个很大的惊喜

Omi 入坑指南 第四场 Router

看来 install 并不是我想象中那样是create的生命周期,所以我们的代码要修改一下。

...
data = {
  tag:'app-intro'
}
...
复制代码

还有我们这里app-intro是我们web components里面定义的 define 标签。

回到我们的浏览器中可以看到

Omi 入坑指南 第四场 Router

下面我们看看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>
    )
  }
})
复制代码

我们回到浏览器

Omi 入坑指南 第四场 Router

目测可以吧,作者再进行改造一次

//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 入坑指南 第四场 Router
Omi 入坑指南 第四场 Router
Omi 入坑指南 第四场 Router
Omi 入坑指南 第四场 Router

预期的效果都能看到,不过用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 中直接处理掉这个数据


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Design for Hackers

Design for Hackers

David Kadavy / Wiley / 2011-10-18 / USD 39.99

Discover the techniques behind beautiful design?by deconstructing designs to understand them The term ?hacker? has been redefined to consist of anyone who has an insatiable curiosity as to how thin......一起来看看 《Design for Hackers》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具