原文链接-https://github.com/AlloyTeam/omi/blob/master/tutorial

omi-router

omi-router是Omi框架专属的router插件，文件尺寸轻量，使用简便，功能强大。用于Omi制作Web单页应用的首选解决方案。

单页的好处也是非常明显:

好了，好处这么多，看看怎么安装使用吧~~

安装 CDN

可以直接通过Unpkg.com下载或引用cdn: https://unpkg.com/omi-router/dist/omi-router.js

router/dist/omi

NPM

npm install omi-router

OmiRouter from 'omi-router'

如果使用全局的 script 标签，则无须如此import便可使用。

开始

先来看下HTML结构:

看下javascript代码:

OmiRouter Home About User UserList App () [ HomeAboutUserListUser} ]) .)

这里详细说下 OmiRouter.init 传递的配置参数的意义:

参数名 意义 是否必须

routes 路由配置。其中每一项中的path代表匹配规则，component代表渲染的组件 必须

renderTo 组件渲染的容器 必须

defaultRoute 如果第一次打开页面没携带hash，默认使用的地址 必须

再看下UserList:

UserList () .tag('UserList',UserList) export default UserList

动态匹配

模式 匹配路径 $route.params

/user/:name /user/dntzhang { username: 'dntzhang' }

/user/:name/category/:category /user/dntzhang/category/js { username: 'dntzhang', category: js }

注意: $route 会被挂载在$store下，$store会在根组件中注入，在组件树中的任何组件都可以通过 this.$store.$route.params 访问hash传递的数据。

接着上面例子

User ()....queryInfo(this.data.name) ..(name) .mockData[name] .back() .tag('User',User) export default User

上面使用了beforeRender进行store到data的转换，beforeRender是生命周期的一部分。且看下面这张图:

注意:除了在constructor中不能读取到 this.$store, 在声明周期的任何其他函数中都能读取到 this.$store，非常便捷。

地址

在线演示地址

源码地址

相关