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> ) } }) 复制代码
这样写后我们的浏览器会给我们一个很大的惊喜
看来 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 中直接处理掉这个数据
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!